.icoSelect {
    position: relative;
    z-index: 999;

    label {
        padding-bottom: 0;
    }
    input {
        display: none;
    }

    &:before {
        content: '';
        display: block;
        width: 1px;
        height: calc(100% + 20px);
        background: #e1e1e1;
        position: absolute;
        top: -10px;
        right: 0;
    }

    &::last-child:before {
        display: none;
    }
    
}



  .icoSelect__select {
    display: inline-block;
    float: left;
    width: 90px;
    height: 50px;
    position: relative;
    border: 0.1rem solid $color--seashell;
    background: $color--white;
    border-radius: 2px;
    margin-bottom: 10px;
    cursor: pointer;

    &:hover {
        border-color: $color--seashell;
    }
    &:after {
        content: '▼';
        display: inline-block;
        float: right;
        line-height: 50px;
        margin-right: 8px;
        color: #000;
    }
  }

.icoSelect__options {
    display: inline-block;
    width: 270px;
    max-height: 300px;
    position: absolute;
    top: 100%;
    left: -1px;
    padding: 5px;
    pointer-events: none;

    &.is-open {
        border: 0.1rem solid $color--seashell;
        background: $color--white;
        border-radius: 2px;
        pointer-events: auto;
        overflow-y: scroll;
    }
}

.icoSelect__option {
    display: inline-block;
    width: 40px;
    height: 40px;
    float: left;
    margin: 10px;
    opacity: 0;

    .icoSelect__options.is-open & {
        opacity: 1;
    }

    &.is-selected {
        display: none;
    }

    svg {
        fill: $color--black !important;
    }
}

.icoSelect__option--selected {
    position: absolute;
    top: calc(50% - 16px);
    left: 10px;
    opacity: 1;
    height: 40px;
    width: 40px;
    pointer-events: none;
    svg {
        fill: $color--mint;
    }

}