@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.icon.buttons .button, .ui.icon.button:not(.compact) {
        // padding: 50px;
    }

    .code-comment-buttons-buttons {
        button:not(.labeled):not(.icon) {
            padding: .78571429em !important;
        }
    }

    // buttons group
    .ui.buttons {
        &.icon .button, &.icon:not(.compact) {
            padding: 50px 50px;
        }

        .button {
            &:first-child {
                border-top-left-radius: var(--border-radius);
                border-bottom-left-radius: var(--border-radius);
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &.button:last-child {
                border-top-right-radius: var(--border-radius);
                border-bottom-right-radius: var(--border-radius);
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            border-right: none;
            flex: 1 0 auto;
            border-radius: 0;
            margin: 0;
        }
    }

    .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');
        line-height: 20px;

        &.tiny {
            font-size: var.get('font-size/sm');
            line-height: var.get('font-size/sm');
        }

        &.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;
        }

        &.green {
            color: var(--color-white);
            background: var(--color-green-dark-2);
        }
    }    
}