/*
 * SPDX-License-Identifier: BSD-2-Clause
 * SPDX-FileCopyrightText: 2025 Arjen Hiemstra <ahiemstra@heimr.nl>
 */

/*
 * This file contains mainly grouped properties that provide shorthands for some
 * of the properties defined in "generated-properties.css".
 */

/* Syntax for properties defining an edge, such as borders */
@property --internal-edge-syntax {
    syntax: "<string>";
    initial-value: "none | (<length> (none | solid) <color>)";
}

@property --internal-alignment-syntax {
    syntax: "<string>";
    initial-value: "(item | content | background) (start | center | end | fill) (start | center | end | fill | stack-center | stack-fill) <integer>";
}

@property padding {
    syntax: "<length>{1,4}";
}

@property inset {
    syntax: "<length>{1,4}";
}

@property margin {
    syntax: "<length>{1,4}";
}

@property layout-alignment {
    syntax: var(--internal-alignment-syntax);
}

@property border {
    syntax: var(--internal-edge-syntax);
}

@property border-width {
    syntax: "<length>";
}

@property border-color {
    syntax: "<color>";
}

@property border-style {
    syntax: "none | solid";
}

@property border-radius {
    syntax: "<length> | (<length> <length> <length> <length>)";
}

@property border-left {
    syntax: var(--internal-edge-syntax);
}

@property border-right {
    syntax: var(--internal-edge-syntax);
}

@property border-top {
    syntax: var(--internal-edge-syntax);
}

@property border-bottom {
    syntax: var(--internal-edge-syntax);
}

@property outline {
    syntax: var(--internal-edge-syntax);
}

@property outline-left {
    syntax: var(--internal-edge-syntax);
}

@property outline-right {
    syntax: var(--internal-edge-syntax);
}

@property outline-top {
    syntax: var(--internal-edge-syntax);
}

@property outline-bottom {
    syntax: var(--internal-edge-syntax);
}

@property color {
    syntax: "<color>";
    inherits: true;
    initial-value: #ffffff;
}

@property text-alignment {
    syntax: var(--internal-alignment-syntax);
}

@property icon-alignment {
    syntax: var(--internal-alignment-syntax);
}

@property box-shadow {
    syntax: "none | (<length> <length> <length> <length> <color>)";
}

@property background {
    syntax: "none | <color> | <url>";
}

@property background-image {
    syntax: "(<url> (mask | inverted-mask) <color>) | <url>"
}

@property font-family {
    syntax: "<string>";
}

@property font-size {
    syntax: "<length-percentage>";
}

@property font-weight {
    syntax: "<integer> | (normal | bold | bolder | lighter)";
}

@property icon-size {
    syntax: "<length>";
}
