@import 'config';
@import '../../variables';

.#{$framework-prefix}select {
  --select-border-color: #{$select-border-color};
  --control-height: #{$control-height};
  --icon-size: 24px;
  min-height: var(--control-height);
  &-container {
    /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, .23);*/
    min-width: $min-column-width;
    width: $max-column-width;
    flex-direction: column;
    position: absolute;
    cursor: pointer;
    max-width: 100%;
    line-height: 1;
    display: flex;
    &:active,
    &:focus {
      outline: none;
      border: none;
      padding: 0;
    }
    & input[type="radio"] {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }
    &:not(:focus) > input[type="radio"] {
      &:not(:checked) + label {
        display: none;
      }
      &:checked + label {
        pointer-events: none;
        &:before {
          transform: rotateX(0);
        }
      }
    }
    & label {
      border-right: 1px solid var(--select-border-color);
      border-left: 1px solid var(--select-border-color);
      min-height: var(--control-height);
      justify-content: center;
      flex-direction: column;
      text-indent: 1.5rem;
      user-select: none;
      cursor: pointer;
      display: flex;
      &:before {
        transition: transform var(--transition-time);
      }
      &:focus {
        outline: none;
      }
      & > .title {
        font-size: 13px;
        color: #a0a0a0;
      }
      & > .desc {
        color: $main-black-color;
        font-size: 17px;
      }
      &:last-of-type {
        border: 1px solid var(--select-border-color);
        border-top: none;
      }
    }
    & > input[type="radio"] {
      &:checked + label {
        border: 1px solid var(--select-border-color);
        order: 1;
        &:before {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7"><path fill="#3A424C" fill-rule="evenodd" d="M0 0h11L5 7z"/></svg>');
          top: calc(calc(var(--control-height) - var(--icon-size, 24px)) / 2);
          transform: scale(var(--icon-scale-koef, 1)) rotateX(180deg);
          height: var(--icon-size, 24px);
          width: var(--icon-size, 24px);
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          right: 24px;
          content: '';
        }
      }
      &:checked + label:hover {
        border-color: var(--green);
        cursor: pointer;
      }
      &:not(:checked) + label {
        /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, .23);*/
        background-color: var(--white);
        justify-content: center;
        z-index: 10;
        order: 2;
        &:hover > .desc {
          color: var(--secondary-color);
          cursor: pointer;
        }
      }
      &:not(:checked) + label > .title {
        display: none;
      }
    }
  }
}