@use "/src/scss/abstracts" as *;

.page-body {
    align-items: start;
    min-height: unset;
}

.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow:
        0 5px 5px -3px rgba(0, 0, 0, 0.2),
        0 8px 10px 1px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.field-definition-wrapper {
    display: inline-block;
}

.inline-display {
    align-items: start;
    column-gap: 0.8rem;

    .edit-button {
        cursor: pointer;
        color: $primary;

        &:hover {
            text-decoration: underline;
        }
    }
}

.reorderable {
    &__title {
        @include desktop-medium {
            align-items: center;
            justify-content: space-between;
        }
    }

    &__status,
    &__color {
        @include desktop-medium {
            margin-left: auto;
        }
    }
}

input[type="color"] {
    width: 3rem;
    height: 2.5rem;
    border-color: $gray-light;
    border-radius: $spacing-050;

    &.new-color {
        height: 3rem;
    }

    &::-webkit-color-swatch {
        border-color: $gray-light;
    }
}

.switch {
    width: 5rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    .toggle {
        &:after {
            content: "No";
        }
    }

    input:checked {
        & + .toggle {
            &:after {
                content: "Yes";
            }
        }
    }
}

.reorderable .switch input:checked + .toggle:before {
    transform: translateX(3rem);
}

.field.full-width {
    flex-basis: 100%;
    max-width: 100%;
}
