/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// Shared between:
// - course_settings/compiler-course_settings.scss
// - account-settings/account-settings.scss

$app_width: 256px;
$app_height: 143px;

.star-sprite {
  display: block;
  width: 46px;
  height: 8px;
  margin-top: 5px;
  overflow: hidden;
  background-image: url(/images/star-sprite.png);
  background-position: 0px 0px;
  &.star-sprite-1 {
    background-position: 0 -8px;
  }
  &.star-sprite-2 {
    background-position: 0 -16px;
  }
  &.star-sprite-3 {
    background-position: 0 -24px;
  }
  &.star-sprite-4 {
    background-position: 0 -32px;
  }
  &.star-sprite-5 {
    background-position: 0 -40px;
  }
}

#external_tools {
  .AddExternalToolButton{
    display: flex;
  }

  .page-header{
    display: flex;
  }

  .externalApps_label_text{
    flex: 1 1;
  }
  .externalApps_buttons_container{
    display: flex;
    justify-content: flex-end;
    flex: 2 2;
  }

  h2 {
    margin: 10px 0;
  }
  p.description {
    margin-bottom: 15px;
  }
  .well {
    border: none;
  }
  .text-right {
    text-align: direction(right);
  }
  .lm {
    margin-#{direction(left)}: 5px;
  }
  table {
    table-layout: fixed;
    margin-bottom: 120px;
  }
  .external_tool_item {
    .external_tool {
      width: 500px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tool-update-badge {
      margin: 0 15px;
      color: var(--ic-brand-primary);
    }
  }
  .app-full-view {
    td {
      border: none;
      vertical-align: top;
    }
    td.app-full-view-left {
      width: 255px;
    }
    h2 {
      margin: 0;
    }
    .add_app {
      margin: 10px 0 5px;
    }
    .app_cancel {
      @include fontSize($ic-font-size--xsmall);
    }
  }
  .reviews {
    margin-top: 5px;
    .avatar {
      padding-#{direction(left)}: 65px;
      min-height: 65px;
    }
    .review-item {
      border-top: thin solid #eeeeee;
      padding-top: 10px;
    }
    .review-item-header {
      margin-top: 0px;
      @include fontSize($ic-font-size--xsmall);
      color: #a1a3a2;
      span {
        color: #666666;
      }
    }
  }
  .app_center {
    .app_list {
      .app {
        cursor: pointer;
        width: $app_width;
        height: $app_height;
        position: relative;
        float: direction(left);
        border: thin solid #eeeeee;
        margin: direction-sides(0 2px 2px 0);
        .installed-ribbon {
          position: absolute;
          width: 100%;
          height: 20px;
          #{direction(right)}: 0;
          z-index: 100;
          color: #adadad;
          text-align: direction(right);
          padding-#{direction(right)}: 5px;
          font-size: 0.9em;
        }
        .banner_image {
          width: $app_width - 40;
          height: $app_height - 40;
          position: relative;
          top: 20px;
          #{direction(left)}: 20px;
        }
        .details {
          position: absolute;
          top: 0px;
          width: $app_width;
          height: $app_height;
          background-color: black;
          color: white;
          display: none;
          .content {
            padding: 15px;
            .name {
              font-weight: bold;
              @include fontSize($ic-font-size--small);
              color: #d6ecfc;
            }
            .desc {
              @include fontSize(11px);
              line-height: $ic-line-height;
            }
          }
        }
      }
    }
  }
  .individual-app {
    td {
      vertical-align: top;
    }
    .gray-box-centered {
      text-align: center;
      color: #666666;
      background-color: #efefef;
      padding: 10px;
    }
    .individual-app-left {
      width: 250px;
      padding-#{direction(right)}: 20px;
      text-align: center;
      .add_app {
        margin-top: 10px;
      }
      .app_cancel {
        display: block;
        margin-top: 5px;
      }
    }
    .individual-app-right {
      h2 {
        margin: 0px;
      }
      .data-label {
        color: #888888;
        text-align: direction(right);
        padding-#{direction(right)}: 10px;
      }
      .data-value {
        ul {
          margin: 0px;
          padding: 0px;
          list-style: none;
        }
      }
      .star-table {
        margin-bottom: 10px;
        td {
          padding: 0px;
        }
      }
    }
  }
  .add-review {
    margin-top: 20px;
    padding-top: 5px;
    border-top: thin solid #dddddd;
    .rate_app {
      font-weight: bold;
    }
  }
  .review-item {
    margin: 0 0 10px;
    td {
      &.image-and-stars {
        padding: direction-sides(10px 0 0 10px);
        width: 58px;
        img {
          max-width: 50px;
        }
      }
      &.review-content {
        .review-item-header {
          @include fontSize($ic-font-size--xsmall);
        }
      }
    }
  }
}

fieldset.rate_app_wrapper {
  margin: 0px;
}

.ConfigurationForm {
  margin: 0px;

  // Fix problems with bootstrap's select //
  .bootstrap-select.btn-group {
    white-space: normal; // Thanks firefox! //

    & > button {
      // We want to fill the container //
      width: 100%;

      .caret {
        float: direction(right);
      }
    }

    .dropdown-menu {
      width: 100%; // we want this to also fill the container //

      // There's a strange...something. Let's remove it. (Taken from conversations css) //
      &.inner {
        width: 100%;
        position: static;
        border: 0;
        padding: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
      }
    }
  }

  .ConfigurationsTypeSelector {
    margin-bottom: 10px;
  }
}

.ExternalAppsRoot, .ReactModal__Content--canvas {
  .control-group {
    margin-bottom: 2px;
  }

  textarea {
    margin-bottom: 0;
  }

  label {
    display: block;
    margin-bottom: 2px;

    input.input-block-level {
      display: block;
      height: 38px;
    }

    .hint-text {
      @include fontSize($ic-font-size--xsmall);
      font-weight: normal;
      display: block;
    }
  }
  .error .hint-text {
    color: $ic-color-danger;
  }
}

.ConfigurationForm {
  margin-bottom: 0px;

  .control-group {
    margin-bottom: 2px;
  }
  input.input-block-level {
    height: 38px;
  }
  label {
    display: block;
    margin-bottom: 2px;
  }
}

@include mobile-only {
  #external_tools {
    .lm {
      margin-#{direction(left)}: 5px;
      padding-#{direction(right)}: 4px;
      padding-#{direction(left)}: 4px;
    }
  }
}
