/* The tertiary button now lives in its own dedicated file (tertiary-button.css,
   loaded via the components.css aggregator) using the canonical mock design
   tokens and an indeterminate loading-sweep underline. The legacy `--primary10`
   rules that used to live here were removed so the dedicated CSS is the single
   source of truth regardless of stylesheet link order. */

/* noinspection CssUnusedSymbol */
.icon-primary-button {
    color: transparent;
    aspect-ratio: 1/1;
    width: 2rem;
    background: var(--primary-700);
    border-radius: .5rem;

    /* Transparent resting border (not `none`) so the hover state can colour it
       to primary-700 with zero layout shift — mirrors the keyspotUIMockup
       border-emphasis hover instead of a box-shadow glow. */
    border: 2px solid transparent;
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* noinspection CssUnusedSymbol */
.icon-primary-button:hover {
    border-color: var(--primary-700);
    cursor: pointer;
}

/* Focus is the global 2px primary-700 outline, offset 2px — no glow. */

/* noinspection CssUnusedSymbol */
.icon-primary-button:focus-visible {
    outline: 2px solid var(--primary-700);
    outline-offset: 2px;
    cursor: pointer;
}

/* noinspection CssUnusedSymbol */
.icon-primary-button:disabled {
    pointer-events: none;
}

.icon-primary-button > span {
    position: absolute;
    display: flex;
    aspect-ratio: 1/1;
    width: calc(100% - 0.13rem);
    border-radius: 0.3em;
}


/* noinspection CssUnusedSymbol */
.icon-secondary-button {
    position: relative;
    color: transparent;
    display: flex;
    aspect-ratio: 1/1;
    width: 2rem;
    background: var(--greyscale-100);
    border-radius: .4em;

    /* Transparent resting border so hover colours it to primary-700 with no
       layout shift (keyspotUIMockup border-emphasis hover, not a glow). */
    border: 2px solid transparent;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/* noinspection CssUnusedSymbol */
.icon-secondary-button:hover {
    border-color: var(--primary-700);
    cursor: pointer;
}

/* Focus is the global 2px primary-700 outline, offset 2px — no glow. */

/* noinspection CssUnusedSymbol */
.icon-secondary-button:focus-visible {
    outline: 2px solid var(--primary-700);
    outline-offset: 2px;
    cursor: pointer;
}

/* noinspection CssUnusedSymbol */
.icon-secondary-button:disabled {
    pointer-events: none;
}

.icon-secondary-button > span {
    position: absolute;
    display: flex;
    aspect-ratio: 1/1;
    width: calc(100% - 0.13rem);
    border-radius: 0.3em;
    background-color: var(--greyscale-100);
}

/* noinspection CssUnusedSymbol */
.icon-container-secondary {
    aspect-ratio: 1/1;
}

.add-primary > span{
    background: url("../images/add.svg") no-repeat;
}

.edit-secondary > span {
    background: url("../images/edit.svg") no-repeat;
}

.edit-secondary:disabled  > span {
    background: url("../images/editDisabled.svg") no-repeat;
}

.download-secondary > span {
    background: url("../images/download.svg") no-repeat;
}

.download-secondary:disabled > span {
    background: url("../images/downloadDisabled.svg") no-repeat;
}

.delete-secondary > span {
    background: url("../images/trash.svg") no-repeat;
}

.delete-secondary:disabled > span {
    background: url("../images/trashDisabled.svg") no-repeat;
}

.upwards-secondary > span {
    background: url("../images/folderUp.svg") no-repeat;
}

/* noinspection CssUnusedSymbol */
.model-secondary {
    background: url("../images/treeList.svg") no-repeat;
}

/* noinspection CssUnusedSymbol */
.file-secondary {
    background: url("../images/document.svg") no-repeat;
}

.folder-secondary > span {
    background: url("../images/folder.svg") no-repeat;
}

/* noinspection CssUnusedSymbol */
.icon-secondary-button[aria-busy="true"] {
    z-index: 0;
    position: relative;
    border: none !important;
}

/* noinspection CssUnusedSymbol */
.icon-secondary-button[aria-busy="true"]::before {
     content: "";
    position: absolute;
    inset: -0.04rem;
    z-index: -1;
    border-radius: inherit;
    padding: 0.1em;
    background: conic-gradient(
            from var(--gradient-angle),
            var(--primary-700),
            var(--primary-400),
            var(--secondary-300),
            var(--primary-400),
            var(--primary-700)
    );
    animation: rotation 2s linear infinite;
}

/* noinspection CssUnusedSymbol */
.icon-secondary-button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: -0.04rem;
    z-index: -1;
    background: conic-gradient(
            from var(--gradient-angle),
            var(--primary-700),
            var(--primary-400),
            var(--secondary-300),
            var(--primary-400),
            var(--primary-700)
    );
    border-radius: inherit;
    animation: rotation 2s linear infinite;
    filter: blur(3.5rem);
}

/* ===== Reduced Motion (BFSG / WCAG 2.3.3) ===== */
@media (prefers-reduced-motion: reduce) {
    /* noinspection CssUnusedSymbol */
    .icon-secondary-button[aria-busy="true"]::before,
    .icon-secondary-button[aria-busy="true"]::after {
        animation: none;
    }
}