@import '@cnbritain/wc-variables/sass/themes/glamour';
@import '@cnbritain/wc-sass-mixins/sass/page';
@import '@cnbritain/wc-sass-fonts/sass/themes/glamour';

@import '../buttons';

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

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

%btn-single {
    @include font('GRAPHIK', 13px, 'MEDIUM', 14px, 20);

    padding: 10px;
    transition: all .1s ease-in-out;
}

.btn-single,
a.btn-single {
    @extend %btn-single;
}

%btn-single--light {
    background-color: $COLOUR_BUTTON_LIGHT_BG;
    border: 1px solid $COLOUR_BUTTON_LIGHT_BORDER;
    color: $COLOUR_BUTTON_LIGHT;
}

%btn-single--light--hover {
    background-color: $COLOUR_BUTTON_LIGHT_BG_HOVER;
    border: 1px solid $COLOUR_BUTTON_LIGHT_BORDER_HOVER;
    color: $COLOUR_BUTTON_LIGHT_HOVER;
}

.btn-single--light,
a.btn-single--light {
    @extend %btn-single--light;

    &:hover {
        @extend %btn-single--light--hover;
    }
}

%btn-single--dark {
    background-color: $COLOUR_BUTTON_DARK_BG;
    border: 1px solid $COLOUR_BUTTON_DARK_BORDER;
    color: $COLOUR_BUTTON_DARK;
}

%btn-single--dark--hover {
    background-color: $COLOUR_BUTTON_DARK_BG_HOVER;
    border: 1px solid $COLOUR_BUTTON_DARK_BORDER_HOVER;
    color: $COLOUR_BUTTON_DARK_HOVER;
}

.btn-single--dark,
a.btn-single--dark {
    @extend %btn-single--dark;

    &:hover {
        @extend %btn-single--dark--hover;
    }
}

%btn-group {
    @include font('GRAPHIK', 13px, 'SEMIBOLD', 16px);

    padding: 10px;
    text-align: center;
    @include transition(all .1s ease-in-out);
}

.btn-group,
a.btn-group {
    @extend %btn-group;
}

%btn-group--light {
    background-color: $COLOUR_BUTTON_GROUP_LIGHT_BG;
    color: $COLOUR_BUTTON_GROUP_LIGHT;
}

%btn-group--light--hover {
    background-color: $COLOUR_BUTTON_GROUP_LIGHT_HOVER_BG;
    color: $COLOUR_BUTTON_GROUP_LIGHT_HOVER;
}

.btn-group--light,
a.btn-group--light {
    @extend %btn-group--light;

    &:hover {
        @extend %btn-group--light--hover;
    }
}

%btn-group--dark {
    background-color: $COLOUR_BUTTON_DARK_BG;
    color: $COLOUR_BUTTON_DARK;
}

%btn-group--dark--hover {
    background-color: $COLOUR_BUTTON_DARK_BG_HOVER;
    color: $COLOUR_BUTTON_DARK_HOVER;
}

.btn-group--dark,
a.btn-group--dark {
    @extend %btn-group--dark;

    &:hover {
        @extend %btn-group--dark--hover;
    }
}

%btn-top-stories {
    background: #fff;
    height: 50%;
    transition: opacity .1s ease-in-out;
    width: 60px;

    svg {
        height: 100%;
        width: 15px;
    }

    svg,
    path {
        fill: #000;
        transition: all .1s ease-in-out;
    }
}

%btn-top-stories--hover {
    background: #f5f5f5;

    svg,
    path {
        fill: #000;
    }
}

%btn-top-stories--disabled {
    background: #fff;

    svg,
    path {
        fill: #000;
        opacity: 0.3;
    }
}


.btn-top-stories,
a.btn-top-stories {
    @extend %btn-top-stories;

    &:hover:not(.btn-disabled):not([disabled]),
    &:focus:not(.btn-disabled):not([disabled]) {
        @extend %btn-top-stories--hover;
    }

    &.btn-disabled,
    &[disabled] {
        @extend %btn-top-stories--disabled;
    }
}



%btn-share {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding-bottom: 0;
    width: 40px;

    svg {
        height: 100%;
        width: 50%;
    }
}

.btn-share,
a.btn-share {
    @extend %btn-share;
}

@each $name, $colour in $COLOUR_SOCIAL {
    %btn-share--#{$name}--hover {
        background-color: map-get($COLOUR_SOCIAL_HOVER, $name);
        fill: $COLOUR_SOCIAL_ICON;
    }

    // %btn-share--#{$name}--dark-hover {
    //     background-color: map-get($COLOUR_SOCIAL_DARK_HOVER, $name);
    //     fill: $COLOUR_SOCIAL_ICON;
    // }

    .btn-share--#{$name},
    a.btn-share--#{$name} {
        background-color: $COLOUR_SOCIAL_ICON;
        fill: #{$colour};

        // &.btn-share--dark {
        //     background-color: map-get($COLOUR_SOCIAL_DARK, $name);
        // }

        // &:hover,
        // &:hover.btn-share--dark {
        //     @extend %btn-share--#{$name}--dark-hover;
        // }

        &.btn-share--light {
            background-color: $COLOUR_SOCIAL_ICON;
            fill: #{$colour};
        }

        &:hover,
        &:hover.btn-share--light {
            @extend %btn-share--#{$name}--hover;
        }
    }
}

%btn-trend {
    background: $COLOUR_BG_SECONDARY;
    border: 0;
    color: $COLOUR_MAIN;
}

%btn-trend-hover {
    background: $COLOUR_MAIN_HIGHLIGHT;
    border: 0;
    color: $COLOUR_MAIN_DARK;
}

.btn--trend,
a.btn--trend {
    @extend %btn-trend;

    &:focus,
    &:hover {
        @extend %btn-trend-hover;
    }
}

%btn-related {
    background: $COLOUR_BG_SECONDARY;
    border: 0;
    color: $COLOUR_MAIN;
    display: inline-block;
    @include font('GRAPHIK', 13px, 'MEDIUM');
    padding: 10px;
    @include transition(all 0.1s ease-in-out);
}

%btn-related--hover {
    background: $COLOUR_BG_DARK;
    border: 0;
    color: $COLOUR_MAIN_DARK;
    text-decoration: none;
}

.btn-related,
a.btn-related {
    @extend %btn-related;

    &:hover {
        @extend %btn-related--hover;
    }
}