@import "../../../../styles/variables";


.version-dropdown {
  color: $chef-primary-dark;

  ::ng-deep label {
    display: inline;
    margin-right: 15px;
    color: $chef-primary-dark;
    font-size: 15px;
  }

  chef-select {
    margin-bottom: 12px;
    width: 420px;
    font-size: 12px;
  }
}

/* Custom dropdown */
.custom-dropdown {
  position: relative;
  vertical-align: middle;

  & select {
    margin: 0;
    background-color: $chef-white;
    color: $chef-primary-dark;
    font-size: inherit;
    padding: 12px;
    padding-right: 16px;
    height: 45px;
    border-radius: 4px;
    border: solid 1px $chef-grey;
    text-indent: 0.01px;
    text-overflow: '';
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.2px;
    outline: none;
    width: 420px;
    font-size: 12px;
    /* Hiding the select arrow for firefox */
    -moz-appearance: none;
    /* Hiding the select arrow for chrome */
    -webkit-appearance: none;
    /* Hiding the select arrow default implementation */
    appearance: none;
  }

  & select [disabled] {
    color: $chef-dark-grey;
    border: solid 1px $chef-grey;
    background-color: $chef-grey;
    padding: 0.7em 3.5em 0.7em 0.7em;
  }

  & select:focus {
    border: solid 1px $chef-primary-bright;
    padding: 0.7em 3.5em 0.7em 0.7em;
  }

  /* Hiding the select arrow for IE10 */

  & select::-ms-expand {
    display: none;
  }

  select option {
    display: absolute;
    display: none;
    -webkit-box-shadow: var(--chef-box-shadow);
    box-shadow: var(--chef-box-shadow);
    border-radius: var(--chef-border-radius);
    background-color: var(--chef-white);
    display: block;
    padding: 1em 3em 1em 1.5em;
    border-bottom: 1px solid var(--chef-grey);
    cursor: pointer;
    color: inherit;
    display: relative;
    white-space: nowrap;
  }
}

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.custom-dropdown::after {
  /* Custom dropdown arrow */
  content: "⌄";
  height: 2em;
  font-size: 12px;
  line-height: 1;
  right: 1.2em;
  top: 50%;
  margin-top: -.5em;
  color: $chef-primary-dark;
}

#no-members-container {
  position: relative;
  top: 70px;
  text-align: center;
}

chef-modal {

  [slot=title] {
    text-align: center;
    font-weight: bold;
    margin-top: 1em;
    padding-bottom: 12px;
  }

  .flex-container {
    display: flex;
    align-items: center;
    flex-direction: column;

    form {
      width: 66%;

      .name-margin {
        margin-bottom: 30px;
        width: 420px;
        font-size: 12px;
      }

      .id-margin {
        margin-bottom: 30px;
      }

      .checkbox-margin {
        margin-bottom: 30px;

        #add-policy-checkbox {
          margin-bottom: 30px;
        }
      }

      .dropdown-margin {
        margin-top: 30px;
        margin-bottom: 16px;
      }

      input {
        font-size: 1em;
      }

      label {
        padding-bottom: 0;
      }

      .detail {
        color: $chef-primary-dark;
        font-size: 12px;
      }

      #id-fields {
        font-size: 0.75em;

        .key-label {
          font-weight: bold;
        }
      }
    }

    #button-bar {
      text-align: center;

      chef-loading-spinner {
        position: relative;
        top: 2px;
        margin-right: 5px;
      }
    }
  }
}
