// Icon buttons

@mixin icon-button-base () {
    display: inline-flex;
    display: -webkit-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 34px;
    height: 38px;
    cursor: pointer;
    border-style: solid;
    border-color: transparent;
    border-width: 1px;
    border-radius: $border-radius;
    transition: border-color .15s;
    background-color: transparent;
    padding: 0 !important;
    @include xl {
        width: 38px;
    }
    @include xxl {
        width: 42px;
    }
}

.icon-button {
    @include icon-button-base();
    &:hover {
        border-color: $main-blue;
    }
    &:focus {
        outline: 0;
        box-shadow: 0 0 0 2px rgba(0, 172, 236, .4);
    }
    &:active {
        box-shadow: inset 0 1px 0 0 $main-blue;
    }
    &--gray-light {
        &:hover {
            border-color: $gray-light;
        }
        &:focus {
            outline: 0;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, .12);
        }
        &:active {
            box-shadow: inset 0 1px 0 0 $gray-light;
        }
    }
}

.icon-button[disabled] {
    cursor: default;
    &:hover  {
        border-color: transparent;
    }
}

.icon-button--small {
    height: 29px;
    width: 28px;
    
    @include xl {
        width: 34px;
    }
}