@import '../_buttons';

%btn-single {
    @include font('NOBEL', 12px);
    letter-spacing: 1px;
    padding: $PADDING_X_SMALL;
    text-transform: uppercase;
    @include transition(all 0.1s ease-in-out);
}

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

%btn-single--light {
    border: $_VOGUE_BORDER_WIDTH solid $COLOR_BUTTON_CTA_LIGHT;
    color: $COLOR_BUTTON_CTA_LIGHT;
}

%btn-single--light--hover {
    background-color: $COLOR_BUTTON_CTA_LIGHT;
    color: #fff;
    text-decoration: none;
}

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

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

%btn-single--dark {
    border: $_VOGUE_BORDER_WIDTH solid $COLOR_BUTTON_CTA_DARK;
    color: $COLOR_BUTTON_CTA_DARK;
}

%btn-single--dark--hover {
    background-color: $COLOR_BUTTON_CTA_DARK;
    color: $COLOR_TYPE_HEADING;
    text-decoration: none;
}

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

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

%btn-group {
    @include font('NOBEL', 10px);
    @include min-screen($DESKTOP_SIDE_GUTTER_BREAKPOINT) {
        @include font-size(11px);
    }
    padding: $PADDING_XX_SMALL;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    @include transition(all 0.1s ease-in-out);
}

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

%btn-group--light {
    border: $_VOGUE_BORDER_WIDTH solid $COLOR_BUTTON_CTA_LIGHT;
    color: $COLOR_BUTTON_CTA_LIGHT;
}

%btn-group--light--hover {
    background-color: $COLOR_BUTTON_CTA_LIGHT;
    color: #fff;
    text-decoration: none;
}

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

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

%btn-group--dark {
    border: $_VOGUE_BORDER_WIDTH solid $COLOR_BUTTON_CTA_DARK;
    color: $COLOR_BUTTON_CTA_DARK;
}

%btn-group--dark--hover {
    background-color: $COLOR_BUTTON_CTA_DARK;
    color: $COLOR_TYPE_HEADING;
    text-decoration: none;
}

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

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

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

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

    svg, path {
        fill: $COLOR_BUTTON_ACTION_ACTIVE;
        @include transition(all 0.1s ease-in-out);
    }

}

%btn-top-stories--hover {
    background: $COLOR_MAIN_ACCENT1;
}

%btn-top-stories--disabled {
    svg, path {
        fill: $COLOR_BUTTON_ACTION_INACTIVE;
    }
}

.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: 45px;
    line-height: 45px;
    //Overwrites defaults padding bottom 2px
    padding-bottom: 0;
    text-align: center;
    width: 45px;

    svg {
        height: 100%;
        fill: #fff;
        width: 16px;
    }
}
.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};
        path {
            fill: #fff;
        }
    }

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


    .btn-share--#{$name},
    a.btn-share--#{$name} {

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

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

        &.btn-share--light {
            path {
                fill: #{$color};
            }
        }

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

.btn-action {
    height: 20px;
    width: 30px;

    svg {
        display: inline-block;
        fill: #000;
        height: 15px;
        vertical-align: bottom;
    }

    & + & {
        border-left: 1px solid $COLOR_BORDER_SOLID_ACCENT1;
    }

    &.btn-disabled,
    &[disabled]{
        svg {
            fill: $COLOR_BUTTON_ACTION_INACTIVE;
        }
    }
}
.btn-action--left {
    text-align: left;
}
.btn-action--right {
    text-align: right;
}

%btn-related {
    @include font('NOBEL', 11px);
    letter-spacing: 1px;
    padding: $PADDING_XX_SMALL;
    text-transform: uppercase;
    @include transition(all 0.1s ease-in-out);
}

%btn-related {
    border: $_VOGUE_BORDER_WIDTH solid $COLOR_BORDER_SOLID_ACCENT2;
    color: $COLOR_MAIN_TERTIARY;
}

%btn-related--hover {
    border-color: $COLOR_BORDER_DOTTED;
    text-decoration: none;
}

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

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