// Inset border utilities
// Uses box-shadow: inset to create a border that does not 
// increase the box size of an ::-webkit-progress-inner-element
// Naming convention: ym-inset-border-{border-position}-{border-size}-{color-name}
@mixin ym-inset-border-l-4-gray-100 {
    box-shadow: var(--ym-inset-border-l-4-gray-100);
}

// Box shadow utilities
// naming convention: ym-shadow-{config-name}
@mixin ym-shadow-none($focus: true) {
    box-shadow: none;
}

// @mixin ym-shadow {
//     box-shadow: 0 1px 4px 0 rgba(#000, 0.3);
// }

@mixin ym-shadow-drawer {
    box-shadow: var(--ym-shadow-drawer);
}

// New utilities to match design specs
// Per https: //gitlab.com/gitlab-org/gitlab-ui/-/issues/615,
// some of the above could be replaced.

// These use gray instead of black to align with
// tinted neutrals.
@mixin ym-shadow-layer-sm($hover: true) {
    box-shadow: var(--ym-shadow-layer-sm); // no var
}

@mixin ym-shadow-layer-md($hover: true) {
    box-shadow: var(--ym-shadow-layer-md); // no var
}

@mixin ym-shadow-layer-lg($hover: true) {
    box-shadow: var(--ym-shadow-layer-lg); // no var
}

@mixin ym-shadow-layer-xl($hover: true) {
    box-shadow: var(--ym-shadow-layer-xl); // no var
}

@mixin ym--focus($focus: true) {
    box-shadow: var(--ym--focus);
    outline: none;
}

@mixin ym--focus-inset($focus: true) {
    box-shadow: var(--ym--focus-inset);
    outline: none;
}

@mixin ym--focus-border($focus: true) {
    box-shadow: var(--ym--focus-border);
    outline: none;
}

@mixin ym-shadow-button {
    box-shadow: var(--ym--focus-button); // no var
}

@mixin ym-shadow-scroll($hover: true) {
    box-shadow: var(--ym--focus-scroll); // no var
}

// @mixin ym-shadow-button-inset($active: true) {
//     box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15) inset; // no var
// }