// scss-lint:disable NestingDepth

/// Global namespace for card component
/// @access public
/// @group button
/// @type string
$DBcard-namespace: "c-card" !default;

/// Global namespace for button component
/// @access public
/// @group card
/// @type color
$DBcard-background: color(white) !default;

// The opaque color for the card border/shadow. Transparency is handled by the class itself.
$DBcard-border: color(gray, x-dark) !default;
$DBcard-border-selected: color(blue) !default;

// Card component with optional arrow/tail
// Simple styling for a card-like component used in a variety of ways with optional arrows for tooltip-like cards
.#{$DBcard-namespace} {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 12px;
    box-sizing: border-box;

    border: 1px solid rgba($DBcard-border, 0.1);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba($DBcard-border, 0.1);
    background-color: $DBcard-background;
    background-clip: padding-box;
    transition: 0.1s;

    &#{&}--arrow {
        &::before, &::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -8px;

            border: 8px solid transparent;
            border-bottom-color: color(white);
            transition: 0.1s;
        }

        &::before {
            margin-left: -9px;

            border-width: 9px;
            border-bottom-color: rgba($DBcard-border, 0.2);
        }



        // West/East directions are only affecting horizontal offsets, so we can
        // style North and South at the same time
        &-nw, &-sw {
            &::after, &::before {
                left: 0;
                margin-left: 12px;
            }

            &::before {
                margin-left: 11px;
            }
        }

        &-ne, &-se {
            &::after, &::before {
                right: 0;
                left: auto;
                margin-right: 12px;
            }

            &::before {
                margin-right: 11px;
            }
        }

        // South direction changes a lot of styles, and it's probably safe to
        // assume North is the desired default.
        &-sw, &-se, &-s {
            &::after, &::before {
                top: 100%;
                bottom: auto;

                border-top-color: color(white);
                border-bottom-color: transparent;
            }

            &::before {
                border-top-color: rgba($DBcard-border, 0.2);
                // Since we're spoofing a triangle with borders, we can't use
                // box-shadow, but we can use the drop-shadow filter. Limited support,
                // but it's just a nice-to-have.
                filter: drop-shadow(0 1px 2px rgba($DBcard-border, 0.2));
            }
        }
    }
}

// Floating cards have a hover state and selected states
.#{$DBcard-namespace}--floating {
    &:hover {
        border-color: rgba($DBcard-border, 0.2);
        box-shadow: 0 1px 2px rgba($DBcard-border, 0.2);
    }

    &.#{$DBcard-namespace}--arrow {
        &:hover::before {
            border-bottom-color: rgba($DBcard-border, 0.3);
        }

        &-se, &-sw, &-s {
            &:hover::before {
                border-top-color: rgba($DBcard-border, 0.3);
                border-bottom-color: transparent;
                filter: drop-shadow(0 1px 2px rgba($DBcard-border, 0.3));
            }
        }
    }

    &.is-selected {
        border-color: $DBcard-border-selected;
    }

    &--arrow.is-selected {
        &::before, &:hover::before {
            border-bottom-color: $DBcard-border-selected;
        }
    }

    &--arrow-se, &--arrow-sw, &--arrow-s {
        &.is-selected {
            &::before, &:hover::before {
                border-top-color: $DBcard-border-selected;
                border-bottom-color: transparent;
            }
        }
    }
}
