/*
 * 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/badge";
@import "./components/caption";
@import "./components/button";
@import "./components/tick";
@import "../browser/components/progress-button/styles/progress-button";
@import "./components/modal";
@import "./components/alert-ribbon";

hero-icon[disabled] .caption {
  color: $color-disabled;
}

hero-icon[disabled]  path {
  fill: $color-disabled;
}

.block {
  display: block;
}

body {
  letter-spacing: 1px;
}

.content {
  height: 100%;
}

.relative {
  position: relative;
}

.soft {
  color: $gray-light;
}

.section-footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  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;
  }

  // Align icon to the left
  hero-icon .icon {
    margin: 0;
  }
}

.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-footer {
  margin-top: 10px;
  margin-bottom: -40px;
  color: lighten($color-disabled, 5%);
  font-size: 10px;
}

.separator-xs {
  flex-grow: 0;
  background-color: darken($color-disabled, 8%);
  padding: 0px;
  min-width: 2px;
}

.button-label {
  margin: 0 auto $spacing-medium;

  // Keep some spacing at the sides
  max-width: $btn-min-width - 5px;
}

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

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

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