@layer components {

    .ship-meter {
        display: grid;
        gap: var(--s-2);
        margin-top: var(--s-3);
    }

    .ship-meter[hidden] {
        display: none;
    }

    .ship-meter__text {
        font-size: var(--t-sm);
    }

    .ship-meter__bar {
        display: block;
        width: 100%;
        height: 4px;
        border: 0;
        border-radius: var(--r-pill);
        background: var(--c-line);
        color: var(--c-accent);
        accent-color: var(--c-accent);
        appearance: none;
        overflow: hidden;
    }

    .ship-meter__bar::-webkit-progress-bar {
        background: var(--c-line);
    }

    .ship-meter__bar::-webkit-progress-value {
        background: var(--c-accent);
    }

    .ship-meter__bar::-moz-progress-bar {
        background: var(--c-accent);
    }

}

@layer utilities {

    [hidden] {
        display: none;
    }

}