@import '@cnbritain/merlin-www-common:gq';

@import './_mixins';
@import './_placeholders';

@import '../wireframe/wireframe';

a.btn-single,
a.btn-group,
a.btn-share,
a.btn-related {
    border-bottom: none;
    display: inline-block;
    text-decoration: none;

    &:hover {
        border-bottom: none;
    }
}

.btn-single,
a.btn-single {
    @include button-single;
}

.btn-single--light,
a.btn-single--light {
    @include button-single-light;

    &:hover {
        @include button-single-light-hover;
    }
}

.btn-single--dark,
a.btn-single--dark {
    @include button-single-dark;

    &:hover {
        @include button-single-dark-hover;
    }
}

.btn-single-two,
a.btn-single-two {
    @include button-single-two;
}

.btn-single-two--light,
a.btn-single-two--light {
    @include button-single-two-light;

    &:hover {
        @include button-single-two-light-hover;
    }
}

.btn-single-two--dark,
a.btn-single-two--dark {
    @include button-single-two-dark;

    &:hover {
        @include button-single-two-dark-hover;
    }
}

.btn-group,
a.btn-group {
    @include button-group;
}

.btn-group--light,
a.btn-group--light {
    @include button-group-light;

    &:hover {
        @include button-group-light-hover;
    }
}

.btn-group--dark,
a.btn-group--dark {
    @include button-group-dark;

    &:hover {
        @include button-group-dark-hover;
    }
}

.btn-top-stories,
a.btn-top-stories {
    @include button-top-stories();

    &:hover:not(.is-disabled):not([disabled]),
    &:focus:not(.is-disabled):not([disabled]) {
        @include button-top-stories-hover();
    }

    &.is-disabled,
    &[disabled] {
        @include button-top-stories-disabled();
    }

}

.btn-share,
a.btn-share {
    @include button-share();
}
.btn-share--monotone,
a.btn-share--monotone {}

@each $name, $color in $COLOUR_SOCIAL {
    .btn-share--#{$name},
    a.btn-share--#{$name} {
        background-color: #{$color};

        &.btn-share--dark {
            @include button-share-dark($name);
        }

        &:hover,
        &:hover.btn-share--dark {
            @include button-share-dark-hover($name);
        }

        &.btn-share--light {
            @include button-share-light($name);
        }

        &:hover,
        &:hover.btn-share--light {
            @include button-share-light-hover($name);
        }
    }
}

.btn-related,
a.btn-related {
    @include button-related();
}