@import "src/variables";
@import "@synerty/peek-plugin-base-js/src/styles/_variables";

.plugin-inbox {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    &__tabs {
        display: flex;
        padding: $general_padding_1;
        background-color: $container-background-color;
        border-bottom: 1px solid $border-color;
    }

    &__tabs-group {
        display: flex;
        gap: 1px;
        background-color: $border-color;
        border-radius: $border-radius;
        overflow: hidden;
    }

    &__tab {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: $general_padding_1 $general_padding_2;
        min-width: $general_button_min_width;
        background-color: $container-background-color;
        border: none;
        color: $font-color-secondary;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background-color: $grey-color-translucent;
        }

        &--active {
            background-color: $primary-color;
            color: $white;

            &:hover {
                background-color: darken($primary-color, 5%);
            }
        }
    }

    &__content {
        flex: 1;
        overflow-y: auto;
        padding: $general_padding_1;
    }
}
