@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;

@mixin hollow {
    --border-radius: #{var.get('measure/.25x')};

    padding: var.get('measure/.375x') var.get('measure/.5x') !important;
    background-color: transparent !important;
    font-weight: normal;

    button, .button {
        border-color: color.get('elevation/6') !important;
        gap: var.get('measure/.5x') !important;
        border-radius: var(--border-radius);

        &:hover {
            border-color: color.get('elevation/7') !important;

            +.label {
                border-left-color: color.get('elevation/7') !important;
            }
        }
    }

    &.labeled {
        button, .button {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }        

        .label {
            border-color: color.get('elevation/6') !important;
            background-color: transparent !important;

            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
            
            
            &:hover {
                border-color: color.get('elevation/7') !important;
            }
        }
    }

    &:hover {
        border-color: color.get('elevation/7') !important;
    }
}

@mixin gitea-button {
    .ui.button {
        border-radius: var(--border-radius);
        transition: color .1s ease, background-color .1s ease, border-color .1s ease;
        padding: calc(#{var.get('measure/.375x')} - 1px) var.get('measure/1x');
        font-size: var.get('font-size/md') !important;
        line-height: 20px;

        &.basic {
            border-radius: var(--border-radius);
        }

        &.red, &.red.basic {
            border-color: var(--color-secondary);
            background: var(--color-button);
            color: var(--color-red);

            &:hover {
                background: var(--color-red-dark-2);
                color: var(--color-white);
            }

            &.basic {
                border-color: rgba(#{color.get('palette/red/base', 'rgb')}, 0.4);
            }
        }

        &.primary, &.red, &.basic {
            font-weight: 500;
        }
    }
}