@import '../Application/colors.scss';
@import '../Application/variables.scss';

$dragBoxShadowColor: rgba($black, .1);

$optionColor: $black;
$optionBackgroundColor: $silver;

$optionDisabledColor: $dustyGray;
$optionDisabledBackgroundColor: $mercury;

.overlay {
    display: flex;
    flex-direction: column;
    padding: $viewPaddingVertical $viewPaddingHorizontal;

    &.sorting {
        user-select: none;
    }
}

.column-option {
    color: $optionColor;
    display: flex;
    font-size: 14px;
    padding: 15px 0;
    width: 100%;

    &:hover {
        background: $optionBackgroundColor;
    }

    .drag-handle {
        cursor: move;
        padding: 0 20px;
    }

    .label {
        flex-grow: 1;
    }

    .icon {
        align-self: flex-end;
        font-size: 20px;
        padding: 0 20px;
    }

    &.dragging {
        background: $optionBackgroundColor;
        box-shadow:
            0 3px 6px $dragBoxShadowColor,
            0 -3px 6px $dragBoxShadowColor;
    }
}

.column-option-disabled {
    color: $optionDisabledColor;

    &:hover {
        background: $optionDisabledBackgroundColor;
    }

    &.dragging {
        background: $optionDisabledBackgroundColor;
    }
}
