/*******************************************************************************
 * Licensed Materials - Property of IBM
 * (c) Copyright IBM Corporation 2020. All Rights Reserved.
 * Copyright (c) 2020 Red Hat, Inc.
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 *******************************************************************************/
@import 'node_modules/carbon-components/scss/globals/scss/_colors';
@import 'scss/variables';

.creation-view-controls-labels {
  padding: 0 0.3125rem 1.125rem 0;

  .bx--form-item.bx--checkbox-wrapper:last-of-type {
    margin-bottom: 10px;
  }
}

.clusterSelector-container {
  position: relative;

  // Show Time window config section only when expanded
  .bx--accordion__content {
    display: none;
  }

  .bx--accordion__item--active {
    .bx--accordion__content {
      width: 100%;
      max-width: 645px;
      display: inline-block;
      background-color: white;
      border-left: 5px solid #dee3e6;
      padding: 1rem;
      margin-bottom: 20px;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    }
  }

  // Cluster label checkbox
  .clusterSelector-checkbox {
    font-weight: 600;
  }

  // Cluster label description
  .labels-descr {
    font-size: 14px;
    margin-bottom: 30px;
  }

  // Cluster label section
  .labels-section {
    display: block;
  }

  .matching-labels-container {
    display: flex;
    margin-bottom: 20px;
  }

  .matching-labels-input {
    max-width: 45%;
    margin-right: 10px;
    overflow: hidden;
  }

  .text-input {
    background-color: $acm_background_color;
  }

  .add-label-btn {
    width: 190px;
    height: 40px;
    padding: 13px;
    text-align: center;
    cursor: pointer;
  }

  .btn-disabled {
    cursor: not-allowed !important;
  }

  .add-label-btn-icon {
    margin-left: 7px;
    float: left;
  }

  .add-label-btn-text {
    font-weight: 600;
    font-size: 14px;
    color: #3d70b2;
  }

  .remove-label-btn {
    padding: 12px 5px;
    cursor: pointer;
  }
}

.shared-resource-warning {
  display: inline-flex;
  color: $color__blue-90;
  line-height: 2rem;

  svg {
    fill: #e6ae3c;
    width: 18px;
    height: 18px;
  }

  p {
    font-size: 14px;
    margin-top: 0.5rem;
  }

  p:first-of-type {
    margin-top: 0rem;
  }

  div:first-of-type {
    margin-right: 5px;
  }

  .warning-font {
    font-weight: 600;
  }

  .code-font {
    font-size: 12px;
    font-family: Menlo, Monaco, "Courier New", monospace;
  }
}

.timeWindow-container {
  position: relative;

  // Active/Block mode btns
  .timeWindow-mode-container {
    display: inline-grid;
    margin-bottom: 10px;
  }

  .mode-btn {
    margin: 5px 0;
  }

  // Time window config accordion
  .bx--accordion__title {
    font-weight: 600;
    font-size: 14px;
  }

  // Show Time window config section only when expanded
  .bx--accordion__content {
    display: none;
  }

  .bx--accordion__item--active {
    .bx--accordion__content {
      width: 100%;
      max-width: 645px;
      display: inline-block;
      background-color: white;
      border-left: 5px solid #dee3e6;
      padding: 1rem;
      margin-bottom: 20px;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    }
  }

  // Time window config - Days of the week section
  .config-days-section {
    margin-bottom: 40px;
  }

  .config-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .config-descr {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .config-days-selector {
    width: 50%;
    display: grid;
    grid-template-columns: auto auto;

    .first-col {
      grid-column-start: 1;
    }

    .second-col {
      grid-column-start: 2;
    }
  }

  // Time window config - Timezone section
  .config-timezone-section {
    margin-bottom: 40px;
  }

  .config-timezone-combo-box {
    width: 290px;
    background-color: $acm_background_color;
  }

  .bx--list-box__label {
    color: #3d70b2;
  }

  // Add bottom border to differenciate user's local timezone from the list
  .bx--list-box__menu-item:first-of-type {
    border-bottom: 1px solid #dfe3e6;
  }

  // Time window config - Start/End time section
  .config-time-section {
    display: block;
  }

  .config-time-container {
    display: flex;
    margin-bottom: 20px;
  }

  .config-start-time {
    float: left;
  }

  .bx--label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .bx--time-picker__input-field {
    width: 140px;
    margin-right: 10px;
    background-color: $acm_background_color;
  }

  .bx--select--inline {
    svg.bx--select__arrow {
      position: relative;
    }
  }

  .add-time-btn {
    width: 220px;
    height: 40px;
    padding: 13px;
    text-align: center;
    cursor: pointer;
  }

  .btn-disabled {
    cursor: not-allowed;
  }

  .add-time-btn-icon {
    margin-left: 7px;
    float: left;
  }

  .add-time-btn-text {
    font-weight: 600;
    font-size: 14px;
    color: #3d70b2;
  }

  .remove-time-btn {
    padding: 12px 5px;
    cursor: pointer;
  }
}
