@use "variables" as *;

:host {
    display: block;
}

.action-header {
    display: flex;
    align-content: center;
    flex-direction: row-reverse;
    align-items: center;
    padding: $spacing-3 $spacing-5;
    font-size: $font-size-md;

    &.selected {
        .action-header__primary-button {
            opacity: 0;
            transform: translateY(-20px);
        }

        .action-header__global-search {
            transform: translateY(-60px);
            visibility: hidden;
        }

        .action-header__group-actions {
            transform: translateY(-60px);
            visibility: visible;
        }
    }
}

.action-header__container {
    flex: 1;
    overflow: hidden;
}

.action-header__global-search {
    align-items: center;
    display: flex;
    transform: translateY(0px);
    transition: transform 0.2s ease;

    & > input {
        width: 300px;
    }
}

.action-header__group-actions {
    align-items: center;
    background: $color-palette-primary;
    color: $white;
    display: flex;
    transform: translateY(0px);
    transition:
        transform 0.2s ease,
        visibility 0.2s ease;
    visibility: hidden;
}

.action-header__selected-items-counter {
    border-right: 1px solid $white;
    margin-right: $spacing-3;
    padding: $spacing-1 $spacing-3;
}
