/*
 * 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.
 */

.page-finish {
  margin-top: -15px;
  flex: 1;

  .col-xs-5.inline-flex.items-baseline > span, .col-xs-5.inline-flex.items-baseline > div {
    margin-bottom: -10px;
  }
}

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

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

.page-finish .button-primary {
  min-width: $btn-min-width;
}

.page-finish .title,
.page-finish .title h3 {
  color: $palette-theme-dark-foreground;
  font-weight: bold;
}

.page-finish .huge-title {
  font-size: 3.5em;
}

.page-finish .label {
  display: inline-block;

  > b {
    color: $palette-theme-dark-soft-foreground;
  }
}

.page-finish .soft {
  color: $palette-theme-dark-soft-foreground;
}

.page-finish .separator-xs {
  flex-grow: 0;
  background-color: $palette-theme-dark-soft-background;
  padding: 0px;
  min-width: 2px;
}

.page-finish .center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-finish .box > div > button {
  margin-right: 20px;
}

.page-finish webview {
  width: 800px;
  height: 300px;
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 9001;
}

.page-finish .fallback-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  color: white;
  height: 320px;
  width: 100vw;

  > * {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .caption {
    display: flex;
    font-weight: 500;
  }

  .caption-big {
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 75px;
  }

  .caption-small {
    font-size: 12px;
  }

  .fallback-footer {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    max-height: 21px;
    margin-bottom: 17px;
  }

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

  .section-footer {
    position: absolute;
    right: 0;
    bottom: 0;

    .footer-right {
      color: #7e8085;
      font-size: 12px;
      margin-right: 30px;
    }
  }
}

.inline-flex {
  display: inline-flex;
}

.items-baseline {
  align-items: baseline;
}

.page-finish .tick--success {
  /* hack(Shou): for some reason the height is stretched */
  height: 24px;
  width: 24px;
  border: none;
  padding: 0;
  margin: 0 15px 0 0;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 16px;
}

.title-wrap {
  margin-left: 5px;

  > .title {
    margin-bottom: 3px;
  }
}
