// src/sass/variables.scss
@use './defaults' as settings;

@use 'vuetify/settings' with (
    $color-pack: false,
    $font-size-root: 14px,
    $line-height-root: 20px,
    $typography: settings.$typography,
    $shadow-key-umbra-opacity: settings.$shadow-key-umbra-opacity,
    $shadow-key-penumbra-opacity: settings.$shadow-key-umbra-opacity,
    $shadow-key-ambient: settings.$shadow-key-ambient,
    $shadow-key-umbra: settings.$shadow-key-umbra,
    $rounded: settings.$rounded,
    $spacer: settings.$spacer,
    $grid-gutter: settings.$grid-gutter,
    $form-grid-gutter: settings.$form-grid-gutter,
    $container-padding-x: settings.$container-padding-x,
    $grid-breakpoints: settings.$grid-breakpoints,
    $container-max-widths: settings.$container-max-widths,
    $input-density: settings.$input-density,
    $window-controls-padding: settings.$window-controls-padding,
    $tooltip-background-color: settings.$tooltip-background-color,
    $tooltip-font-size: settings.$tooltip-font-size,
    $tooltip-border-radius: settings.$tooltip-border-radius,
    $tooltip-padding: settings.$tooltip-padding,
    $switch-track-height: settings.$switch-track-height
);
a {
    text-decoration: none;
}

.skeleton-box {
    position: relative;
    background-color: rgb(var(--v-theme-loading));
    overflow: hidden;
    height: 100%;
    width: 100%;
    cursor: wait;

    &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, var(--v-skeleton-gradient)), rgba(255, 255, 255, 0));
        animation: loading 2s infinite;
        content: '';
    }

    @keyframes loading {
        100% {
            transform: translateX(100%);
        }
    }
}

.text-ellipses {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}
.text-break-new-line {
    overflow-wrap: break-word;
    line-break: anywhere;
}

.mobile-chip {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    &.bg-warning {
        color: rgb(var(--v-theme-surface)) !important;
    }
}

.p-ten-top {
    padding-top: 10px !important;
}

.p-ten-b {
    padding-bottom: 10px !important;
}

.font-mono {
    font-family: 'Roboto Mono', monospace;
}

.tiny-text {
    font-size: 10px !important;
}
