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

$drawer-container-padding: 10px 20px;

@mixin drawer-stacking-context($z-index: 1) {
    position: relative;

    z-index: $z-index;
}

@mixin hc-drawer() {
    bottom: 0;
    box-sizing: border-box;
    display: block;
    height: 100%;
    outline: 0;
    overflow-y: auto;
    position: absolute;
    top: 0;
    z-index: 3;
}

@mixin hc-drawer-right() {
    right: 0;
}

@mixin hc-drawer-open() {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

@mixin hc-drawer-container() {
    @include drawer-stacking-context();

    box-sizing: border-box;
    display: block;
    overflow: hidden;
}

@mixin hc-drawer-content() {
    @include drawer-stacking-context();

    display: block;
    height: 100%;
    left: 0;
    overflow: auto;
    padding: $drawer-container-padding;
    right: 0;
}

@mixin hc-drawer-animation() {
    transition: {
        duration: 0.3s;
        property: transform, margin-left, margin-right;
    }
}