@import "../variables";
@import "~cosmoUiVariables";

$card-bg-color: $white !default;
$card-bg-hover-color: #EFF0F2 !default;
$card-bg-active-color: #f6f6f6 !default;
$card-bg-active-hover-color: #DEDEDE !default;
$card-bg-selected-color: #f6f6f6 !default;
$card-bg-selected-hover-color: #DEDEDE !default;
$card-bg-invalid-color: #EFF0F2 !default;
$card-bg-invalid-hover-color: #DEDEDE !default;
$card-bg-drop-target-color: #EFF0F2 !default;
$card-bg-drop-target-hover-color: #DEDEDE !default;

$card-border-width: 1px;

$card-border-style: solid;

$card-border-color: rgb(234, 237, 241) !default;
$card-border-color-hover: lighten(rgb(234, 237, 241), 15%) !default;
$card-border-color-active: $accent-color !default;
$card-border-color-active-hover: $accent-color-hover !default;
$card-border-color-selected: $accent-color !default;
$card-border-color-selected-hover: $accent-color-hover !default;
$card-border-color-invalid: $accent-color !default;
$card-border-color-invalid-hover: $accent-color-hover !default;
$card-border-color-drop-target: $accent-color !default;
$card-border-color-drop-target-hover: $accent-color-hover !default;

$card-border-radius: 6px !default;
$card-border-radius-active: 6px !default;
$card-border-radius-selected: 6px !default;
$card-border-radius-invalid: 6px !default;
$card-border-radius-drop-target: 6px !default;

$card-bg-expanded-color: $white !default;

.card {
    transition: all 0.25s ease;
    font-size: 11px;
    background-color: $card-bg-color;
    position: relative;
    border-color: $card-border-color;
    border-radius: $card-border-radius;
    border-width: $card-border-width;
    border-style: $card-border-style;

    &:hover {
        background-color: $card-bg-hover-color;
        border-color: $card-border-color-hover;
    }
}

.active {
    background-color: $card-bg-active-color;
    border-color: $card-border-color-active;
    border-radius: $card-border-radius-active;

    &:hover {
        background-color: $card-bg-active-hover-color;
        border-color: $card-border-color-active-hover;
    }
}

.selected {
    background-color: $card-bg-selected-color;
    border-color: $card-border-color-selected;
    border-radius: $card-border-radius-selected;

    &:hover {
        background-color: $card-bg-selected-hover-color;
        border-color: $card-border-color-selected-hover;
    }
}

.invalid {
    background-color: $card-bg-invalid-color;
    border-color: $card-border-color-invalid;
    border-radius: $card-border-radius-invalid;

    &:hover {
        background-color: $card-bg-invalid-hover-color;
        border-color: $card-border-color-invalid-hover;
    }
}

.dropTarget {
    background-color: $card-bg-drop-target-color;
    border-color: $card-border-color-drop-target;
    border-radius: $card-border-radius-drop-target;

    &:hover {
        background-color: $card-bg-drop-target-hover-color;
        border-color: $card-border-color-drop-target-hover;
    }
}

.disabled {
    opacity: 0.5;
    user-select: none;
    cursor: not-allowed;
}