/*
 * Copyright 2016 Resin.io
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

$icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
$body-bg: rgb(83, 87, 96);
$text-color: white;
$brand-primary: rgb(87, 147, 219);
$gray-light: #ddd;
$font-size-base: 13px;
$cursor-disabled: initial;
$color-disabled: rgb(120, 124, 127);
$btn-disabled: rgb(49, 51, 57);
$btn-min-width: 170px;
$link-color: $gray-light;
$link-hover-decoration: none;
$btn-default-bg: #ececec;
$btn-default-color: #b3b3b3;
$brand-warning: rgb(233, 152, 82);
$alert-warning-bg: $brand-warning;
$alert-warning-text: #fff;
$alert-padding: 13px;

@import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

@import "./modules/bootstrap";
@import "./modules/space";
@import "./components/label";
@import "./components/badge";
@import "./components/caption";
@import "./components/button";
@import "./components/tick";
@import "./components/modal";
@import "./components/alert-ribbon";
@import "../components/update-notifier/styles/update-notifier";
@import "../components/progress-button/styles/progress-button";
@import "../components/svg-icon/styles/svg-icon";
@import "../components/drive-selector/styles/drive-selector";
@import "../components/tooltip-modal/styles/tooltip-modal";
@import "../pages/settings/styles/settings";
@import "../pages/finish/styles/finish";

.icon-caption {
  @extend .caption;
  @extend .center-block;

  margin-top: 10px;

  &[disabled] {
    color: $color-disabled;
  }
}

body {
  letter-spacing: 1px;
}

.relative {
  position: relative;
}

.section-footer {
  @extend .text-center;

  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  bottom: 20px;
  left: -33px;
  right: 0;
  color: $color-disabled;
  margin: 0 60px;
  padding-top: 15px;
  //border-top: 2px solid darken($color-disabled, 8%);

  // Override default column padding
  // set by flexboxgrid.
  .col-xs {
    padding: 0;
  }

  .svg-icon {
    margin: 0 13px;
  }

  .caption[os-open-external] {
    border-bottom: 1px dashed;
    padding-bottom: 2px;

    &:hover {
      color: lighten($color-disabled, 5%);
    }
  }

  .footer-right {
    position: absolute;
    right: 0;
    top: 50%;
  }
}

.step-border {
  height: 2px;
  background-color: $text-color;
  position: absolute;
  width: 230px;
  top: 95px;

  &[disabled] {
    background-color: $color-disabled;
  }
}

.step-border-left {
  @extend .step-border;
  left: -120px;
}

.step-border-right {
  @extend .step-border;
  right: -120px;
}

.step-tooltip {
  display: block;
  margin: -5px auto -20px;
  color: lighten($color-disabled, 5%);
  font-size: 10px;
}

.step-footer {
  margin-top: 10px;
  margin-bottom: -40px;
  color: lighten($color-disabled, 5%);
  font-size: 10px;
}

.step-footer-split {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  max-width: $btn-min-width;
}

.step-footer-underline {
  border-bottom: 1px dotted;
  padding-bottom: 2px;
}

.btn.step-footer {
  font-size: 12px;
  border-bottom: 1px dashed;
  border-radius: 0;
  padding: 0;
}

.wrapper {
  height: 100%;
  margin: 20px 60px;
}

.section-header {
  @extend .text-right;
  padding: 5px 8px;
  font-size: 15px;

  & > .btn {
    padding-left: 3px;
    padding-right: 3px;
  }
}
