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

@import './_mixins';
@import '../wireframe/wireframe';

/* ===RESET=== */

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

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

}

/* ===SINGLE=== */

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

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

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

    @include disabled-selectors {
        @include button-single-light-disabled;
    }
}

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

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

    @include disabled-selectors {
        @include button-single-dark-disabled;
    }
}

/* ===GROUP=== */

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

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

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

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

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

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

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

    &:hover,
    &:focus {
        @include button-group2-light-hover;
    }
}

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

    &:hover,
    &:focus {
        @include button-group2-dark-hover;
    }
}

/* ===TOP STORIES=== */

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

    &:hover,
    &:focus {
        @include button-top-stories-hover();
    }

    @include disabled-selectors {
        @include button-top-stories-disabled();
    }

}

/* ===SHARE=== */

.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.btn-share--dark,
        &:focus.btn-share--dark {
            @include button-share-dark-hover($name);
        }

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

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

/* ===RELATED=== */

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

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

    &:hover,
    &:focus {
        @include button-related-light-hover;
    }
}

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

    &:hover,
    &:focus {
        @include button-related-dark-hover;
    }
}

/* ===GALLERY NAVIGATION=== */

.btn-gallery-navigation,
a.btn-gallery-navigation {
    @include button-gallery-navigation;

    &:hover,
    &:focus {
        @include button-gallery-navigation-hover;
    }

    @include disabled-selectors {
        @include button-gallery-navigation-disabled;
    }

}