@import '../../components/link/link';

.#{$namespace}link {
    @include link($colorCeruleanBlue, 1.4rem);
    text-transform: none;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;

    &:hover,
    &:active {
        border: none;
        background: none;
        padding: 0;
    }

    &:visited {
        text-decoration: none;
    }

    &--look {
        &_text {
            color: $colorDoveGray;
            text-decoration: none;

            &:visited,
            &:hover {
                color: $colorDoveGray;
            }
        }

        &_icon-big {
            min-height: 2rem;
            min-width: 2.7rem;
        }
    }

    &--size {
        &_300 {
            font-size: 1.2rem;
        }
    }

    &--separator {
        margin-right: 0.5rem;

        &:after {
            margin-left: 0.5rem;
            content: '';
            display: inline-block;
            width: 0.2rem;
            height: 1.2rem;
            background: $colorAlto;
        }
    }

    &__icon {
        max-width: 1.4rem;
        max-height: 1.2rem;
        fill: rgba(0, 0, 0, 0.25);
        padding-right: 0.5rem;

        &--big {
            min-height: 2rem;
            min-width: 2.7rem;
            padding-right: 0;
            padding-left: 0.5rem;
            fill: $colorCeruleanBlue;

            &:hover {
                fill: $colorCeruleanBlueHover;
            }
        }

        &--edit {
            fill: $colorCeruleanBlue;
            width: 1.8rem;
            height: 1.8rem;
            max-height: none;
            max-width: none;
        }
    }
}