@import "../palette";
@import "../variables";
@import "../mixins/fontSize";

$company-size: 35px;
.company-selector-panel {
  &__create {
    color: $positive-color;
    padding: 0 15px;
    display: block;
    line-height: $company-size;
    &__container {
      border-bottom: 1px solid $light-blue-color;
      padding: 10px 0;
    }
    &:hover {
      background: $light-blue-color;
    }
  }
  &__item {
    img {
      width: $company-size;
      height: $company-size;
      object-fit: cover;
      background: $light-blue-color;
      border-radius: 3px;
    }
    &__settings {
      display: none;
      padding: 0.5em;
      line-height: 1.5em;
      cursor: pointer;
      align-self: center;
      border-radius: 2px;
      color: $brand-color;
      svg {
        stroke: $brand-color;
        vertical-align: middle;
        margin-right: 0.25em;
      }
      &:hover {
        background: $dark-blue-color;
        color: white;
        svg {
          stroke: white;
        }
      }
    }
  }
  &__loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $above-z-index;
    background: rgba(0,0,0,0.5);
    display: flex;
    padding: 0 20px 20px;
    align-items: center;
    justify-content: center;
    user-select: none;
    .wait-indicator {
      margin: 20px 0 30px;
      position: relative;
    }
    &__content {
      border-radius: 2px;
      background: $dark-blue-color;
      max-width: 300px;
      @include border($light-blue-color);
      padding: 20px 40px 20px;
      position: relative;
      text-align: center;
      box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
      &__message {
        color: white;
        &__name {
          font-size: 1.1em;
        }
      }
    }
  }
}