@import "@cnbritain/wc-variables/sass/themes/wired";
@import "@cnbritain/wc-sass-mixins/sass/page";
@import "@cnbritain/wc-sass-fonts/sass/themes/wired";
@import '../_buttons';

$_FONT_BRUTAL: map-get($FONT_GROUPS, 'BRUTAL');
$_FONT_EXCHANGE_WEB: map-get($FONT_GROUPS, 'EXCHANGE WEB');

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 {
    padding: 10px 15px;
    font-family: map-get($_FONT_BRUTAL, 'FAMILY');
    line-height: map-get($_FONT_BRUTAL, 'LINE HEIGHT');
    text-transform: uppercase;
    @include transition(all 0.1s ease-in-out);
}

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

%btn-single--light {
    border: 1px solid #000;
    color: #000;
}

%btn-single--light--hover {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
}

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

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

%btn-single--dark {
    background-color: #333;
    color: #fff;
}

%btn-single--dark--hover {
    background-color: #fff;
    color: #000;
}

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

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

%btn-group {
    min-width: 40px;
    max-width: 280px;
    padding: 10px 10px;

    @include min-screen($TABLET_SIDE_GUTTER_BREAKPOINT) {
        min-width: 60px;
        padding: 12px 12px 10px 12px;
    }

    font-family: map-get($_FONT_EXCHANGE_WEB, 'FAMILY');
    line-height: map-get($_FONT_EXCHANGE_WEB, 'LINE HEIGHT');
    @include transition(all 0.1s ease-in-out);

    text-align: center;
}

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

%btn-group--light {
    background-color: #fff;
    color: #000;
}

%btn-group--light--hover {
    background-color: #000;
    color: #fff;
}

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

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

%btn-group--dark {
    background-color: #333;
    color: #fff;
}

%btn-group--dark--hover {
    background-color: #fff;
    color: #000;
}

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

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

%btn-top-stories {
    background: #f5f5f5;
    height: 50%;
    @include transition(all 0.1s ease-in-out);
    width: 60px;

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

    path {
        stroke: #000;
        @include transition(all 0.1s ease-in-out);
    }

}

%btn-top-stories--hover {
    background: #000;
    svg, path {
        stroke: #fff;
    }
}

%btn-top-stories--disabled {
    svg, path {
        stroke: #dfdfde;
    }
}

.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 {
    border-radius: 50%;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    //Overwrites defaults padding bottom 2px
    padding-bottom: 0;
    width: 40px;

    svg {
        height: 100%;
        fill: #fff;
        width: 80%;
    }
}
.btn-share,
a.btn-share {
    @extend %btn-share;
}
.btn-share--monotone,
a.btn-share--monotone {}

@each $name, $color in $COLOUR_SOCIAL {
    %btn-share--#{$name}--hover {
        background-color: #{$color};
    }
    %btn-share--#{$name}--dark-hover {
        background-color: map-get($COLOUR_SOCIAL_DARK, $name);
    }
    .btn-share--#{$name},
    a.btn-share--#{$name} {
        background-color: #{$color};

        &.btn-share--dark {
            background-color: #3e3e3e;
        }

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

        &.btn-share--light {
            background-color: #ccc;
        }

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


%btn-related {
    background-color: #f5f5f5;
    color: #000;
    font-family: map-get($_FONT_BRUTAL, 'FAMILY');
    line-height: map-get($_FONT_BRUTAL, 'LINE HEIGHT');
    padding: 10px 15px;
    text-transform: uppercase;
    @include transition(all 0.1s ease-in-out);

    &:hover {
        background-color: #000;
        color: #fff;
    }
}

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