@use '../../../dependencies' as *;

@mixin insertCustomSelectFieldOption($width: 312) {
  .option {
    width: 100%;

    display: flex;
    flex-direction: row;

    justify-content: space-between;

    padding: 10px 16px;
    gap: 8px;

    box-sizing: border-box;

    cursor: pointer;

    .label {
      all: unset;
      width: 252px;
      @include fnt($size: 16, $line_height: 24, $weight: 400, $color: #101828);
    }

    &:hover {
      background-color: #F2F4F7;
    }

    &.active {
      background-color: #F0F6FF;

      .icon {
        width: 20px;
        height: 20px;

        display: flex;
        justify-content: center;
        align-items: center;

        * {
          stroke: #1A40FF;
        }
      }

      &:hover {
        background-color: #D9E6FF;
      }
    }
  }
}