@mixin sticky-table($spacing: 1em) {
    & thead th {
        position: sticky;
        top: 0;
        padding-top: $spacing;
        padding-bottom: $spacing;
        background: white;
        color: $dark-gray-500;
        text-transform: uppercase;
        font-weight: normal;
        border-bottom: 1px solid $light-gray-500;
        border-top: 1px solid $light-gray-500;
    }

    & th,
    & td {
        text-align: left;
        padding: $spacing;

        &:first-child {
        }

        &:last-child {
            text-align: right;
        }
    }

    & tbody th {
        font-weight: normal;
    }
}

@mixin bordered-button($style: 'blue') {
    $primary: $main-blue;
    $alternate: #E1f2fc;

    @if ($style == 'green') {
        $primary: $alert-green;
        $alternate: #e4f4e8;
    }

    @if ($style == 'red') {
        $primary: $alert-red;
        $alternate: #fcefef;
    }

    @if ($style == 'orange') {
        $primary: $alert-orange;
        $alternate: #fef1ea;
    }


    padding: .5em 1em;
    background: $alternate;
    color: $primary;
    border: 1px solid $primary;
    transition: background-color 300ms, color 150ms;

    &:hover {
        background: $primary;
        color: white;
    }

    &.is-busy {
        animation: components-button__busy-animation 2500ms infinite linear;
        background-size: 100px 100%;
        background-image: repeating-linear-gradient(-45deg, $alternate, #fff 11px, #fff 10px, $alternate 20px);
        opacity: 1;

        &:hover {
            color: $primary;
        }
    }
}

/**
 * Breakpoint mixins
 */

@mixin break-min-width( $width ) {
    @media (min-width: #{ ($width) }) {
        @content;
    }
}

@mixin break-huge() {
    @media (min-width: #{ ($break-huge) }) {
        @content;
    }
}

@mixin break-wide() {
    @media (min-width: #{ ($break-wide) }) {
        @content;
    }
}

@mixin break-xlarge() {
    @media (min-width: #{ ($break-xlarge) }) {
        @content;
    }
}

@mixin break-large() {
    @media (min-width: #{ ($break-large) }) {
        @content;
    }
}

@mixin break-medium() {
    @media (min-width: #{ ($break-medium) }) {
        @content;
    }
}

@mixin break-small() {
    @media (min-width: #{ ($break-small) }) {
        @content;
    }
}

@mixin break-mobile() {
    @media (min-width: #{ ($break-mobile) }) {
        @content;
    }
}

@mixin break-zoomed-in() {
    @media (min-width: #{ ($break-zoomed-in) }) {
        @content;
    }
}

@mixin dashicon($unicode: none, $size: 20px) {
    content: $unicode;
    font-family: dashicons;
    display: inline-block;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: never;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: $size;
    height: $size;
    font-size: $size;
    vertical-align: top;
    text-align: center;
    transition: color 0.1s ease-in;
}

@mixin recommended-icon($size: 20px) {
    $size: #{var(--itsec-recommended-icon-size, $size)};

    --itsec-recommended-icon-padding: calc(#{$size} / 5);
    @include dashicon('\f155', #{$size});
    font-size: calc(#{$size} - (var(--itsec-recommended-icon-padding) * 2));
    border-radius: 50%;
    padding: var(--itsec-recommended-icon-padding);
    padding-left: calc(var(--itsec-recommended-icon-padding) + 0.5px);
    background: $main-blue;
    color: $white;
}