@use "variables" as *;

:host {
    cursor: move;
    display: flex;
    justify-content: center;
    margin-bottom: $spacing-3;
    position: relative;

    .field__actions-delete {
        position: absolute;
        right: 0;
        top: 0;
    }

    hr {
        background: $color-palette-gray-700;
        border: 0;
        bottom: 0;
        height: 1px;
        margin: 0;
        position: absolute;
        width: 100%;
    }
}

$tab-name-height: 32px;

.tab__label {
    border-color: $color-palette-gray-700 $color-palette-gray-700 $color-palette-gray-200
        $color-palette-gray-700;
    border-radius: 5px 5px 0 0;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    cursor: text;
    font-size: $font-size-sm;
    height: $tab-name-height;
    line-height: $tab-name-height;
    min-width: 100px;
    padding: 0 $spacing-1;
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
    margin-right: $spacing-9;
    overflow: hidden;
    word-wrap: break-word;

    &:focus {
        outline-width: 0;
    }
}
