@import './colors';
@import './mixins';
@import './icons';

@mixin hc-app-switcher-outer() {
    height: 100%;
    width: 100%;
}

@mixin hc-app-switcher() {
    max-width: 360px;
}

@mixin hc-app-switcher-header() {
    align-items: baseline;
    border-bottom: 1px solid $gray-300;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    padding-bottom: 5px;
    padding-left: 2px;
}

@mixin hc-app-switcher-all-apps-link() {
    @include fontSize(13px);
}

@mixin hc-app-switcher-apps() {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

@mixin hc-app-switcher-app() {
    flex: 0 0 auto;
}

@mixin hc-app-switcher-link() {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-decoration: none;
}

@mixin hc-app-switcher-app-title() {
    color: $offblack;
    font-weight: 600;
    padding-top: 8px;
    text-align: center;
    width: 100px;
}

@mixin hc-app-switcher-app-img() {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@mixin hc-app-switcher-link-highlighted() {
    opacity: 0.5;
    pointer-events: none;
}

@mixin hc-app-switcher-empty() {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 20px;
    text-align: center;
    width: 360px;
}

@mixin hc-app-switcher-spinner-container() {
    padding: 65px 0;
}

@mixin hc-app-switcher-icon() {
    background-repeat: no-repeat;
    height: 40px;
    opacity: 0.5;
    width: 40px;
}

@mixin hc-app-switcher-links-ico-th() {
    background-image: url($ico-th-grey);
}

@mixin hc-app-switcher-warning-icon() {
    background-image: url($ico-warning);
}

@mixin hc-app-switcher-empty-icon() {
    background-image: url($ico-empty);
}

@mixin hc-app-switcher-retry() {
    cursor: pointer;
    font-weight: 600;
    margin-top: 10px;
}

@mixin hc-app-switcher-links-bottom-spacer() {
    padding-bottom: 15px;
}

@mixin hc-app-switcher-links() {
    align-items: center;
    border-top: 1px solid lighten($slate-blue, 20%);
    color: $slate-gray-300;
    display: flex;
    height: 55px;
    padding-left: 2%;
    text-decoration: none;
    transition: background-color 0.25s ease;

    &:hover {
        background-color: darken($slate-blue, 5%);
    }
}

@mixin hc-app-switcher-links-icon() {
    color: $slate-gray-400;
    padding-left: 28px;
}

@mixin hc-app-switcher-links-text() {
    padding-left: 33px;
}