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

.modal-content {
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: baseline;
  text-transform: uppercase;
  font-size: 11px;
}

.modal-title {
  font-size: inherit;
  flex-grow: 1;
}

.modal-header {
  color: $btn-default-color;
  padding: 11px 20px;
  flex-grow: 0;
}

.modal-body {
  flex-grow: 1;
  color: #666;
  padding: 0 20px;
  max-height: 250px;
  overflow: auto;
}

// Since Etcher opens with a known width & height and its
// not resizable, we can safely use an absolute value here
.modal-content {
  height: 320px;
}

.modal-body .list-group-item {
  display: flex;
  align-items: center;
  border-left: none;
  border-right: none;
  border-radius: 0;
  border-color: #eee;
  padding: 12px 0;

  & > .tick {
    font-size: 11px;
  }
}

.modal-body .list-group-item-heading {
  font-size: 13px;
}

.modal-body .list-group-item-text {
  line-height: 1;
  font-size: 11px;
  color: #aaa;
}

.modal-body .list-group-item :first-child {
  flex-grow: 1;
}

.modal-body .list-group-item:first-child {
  border-top: none;
}

// UI Bootstrap adds the `.modal-open` class to the <body>
// element and sets its right padding to the width of the
// window, causing the window content to overflow and get
// pushed to the bottom.
// The `!important` flag is needed since UI Bootstrap inlines
// the styles programatically to the element.
.modal-open {
  padding-right: 0 !important;
}

.modal-footer {
  flex-grow: 0;
  border: 0;
}

.modal .btn-primary[disabled] {
  background-color: darken($gray-lighter, 10%);
}

// Center the modal using Flexbox so we can
// freely use any height.

.modal {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.modal-dialog {
  margin: 0;
  position: initial;
}

