.select {
  color: $charcoal;
  position: relative;

  .selected {
    padding-right: (33em / 14);
    font-size: 14px;

    .flag {
      height: 15px;
      margin-right: (7em / 14);
    }

    &.form-input {
      button {
        position: absolute;
        right: (12em / 14);
        top: (2em / 14);
        margin: (12em / 14) 0 (9em / 14);
      }

    }
  }

  &.form-variant {
    .selected {
      padding-right: (33em / 14);

      &.form-input {
        button {
          position: absolute;
          right: (5em / 14);
          top: (2em / 14);
          margin: (12em / 14) 0 (9em / 14);
        }

      }
    }

    .options {
      display: none;
      position: absolute;
      background-color: white;
      width: 100%;
      top: 100%;
      left: 0;
      z-index: 5;

      &.open {
        display: block;
        overflow: hidden;
        height: auto;
        border: 1px solid $light-mint;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);

        .option {
          padding: 16px 20px 15px 12px;
          width: auto;
          border-bottom: 1px solid $off-white;

          &:hover {
            background-color: $off-white;
            cursor: pointer;
          }

          &.selected {
            background-color: $light-mint;
          }
        }
      }
    }

    .option {
      font-size: (14em /$global-size);
      line-height: (17em / 14);
    }

  }

  .options {
    display: none;
    position: absolute;
    background-color: white;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 5;

    &.open {
      display: block;
      height: (200em / 14);
      overflow-y: scroll;
      overflow-x: hidden;

      .option {
        padding-bottom: 0.5rem;
        width: auto;
        border-bottom: 1px solid grey;
      }
    }
  }

  .option {
    font-size: (14em /$global-size);

    &.selected {
      background-color: #8a8a8a;
    }
  }
}

.flag {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 12px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.cell-number-input {
  .label-fix {
    .form-group {
      label {
        transform: translateX(0);
      }

      input:focus + label {
        transform: scale(0.78571) translate(-0.85714em, -2.18182em);
      }
    }
  }
}