@use "/src/scss/abstracts" as *;

.modal {
    overflow: auto;
}

.nav-container {
    height: 50px;
}

.navbar {
    display: block;
    display: flex;
    align-items: flex-start;
    background-color: $gray-50;
    border-bottom: 1px solid $gray-200;
    height: 98%;

    .tab {
        padding: $spacing-400 $spacing-500;
        height: 100%;
        border-right: 1px solid $gray-200;
        color: $primary;

        &.active {
            background-color: $white;
            height: 102%;
            border-top-right-radius: $spacing-200;
        }

        &:hover {
            cursor: pointer;
        }

        icon {
            margin-right: $spacing-100;

            ::ng-deep svg {
                height: 16px;
                width: 16px;
            }
        }
    }
}

.modal-body {
    min-height: 350px;
}

.note-content {
    display: flex;
    justify-content: flex-start;
    gap: $spacing-200;
    line-height: 22px;
    padding: $spacing-100;

    icon {
        &.info::ng-deep svg path {
            color: $blue-700;
        }
        &.warning::ng-deep svg path {
            color: $yellow-darker;
        }
    }
}

.warning-note {
    padding: $spacing-400;
}

.back-button {
    margin-right: auto;
    line-height: 14px;

    icon::ng-deep svg {
        margin-right: $spacing-100;
        color: $gray-500;
        height: 14px;
        width: 14px;
        transform: translateY(1px);
    }
}
