/******************************************************************************
*  Copyright (C) 2021 Broadcom.
*  The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
*  See LICENSE for terms and conditions.
******************************************************************************/

*, *:before, *:after {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: inherit;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--bui-neutral-background-color);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--bui-neutral-background-color);
}

.bui-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

.bui-disabled, .bui-disabled * {
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}

.bui-inherit {
    --bui-static-foreground-color: inherit;
    --bui-static-background-color: inherit;
    --bui-static-border-color: inherit;
    --bui-focus-foreground-color: inherit;
    --bui-focus-background-color: inherit;
    --bui-focus-border-color: inherit;
    --bui-focus-shadow-color: inherit;
    --bui-hover-foreground-color: inherit;
    --bui-hover-background-color: inherit;
    --bui-hover-border-color: inherit;
    --bui-active-foreground-color: inherit;
    --bui-active-background-color: inherit;
    --bui-active-border-color: inherit;
}

/***************************************************************************************/
/* Shapes */

.bui-shape-default {
    border-radius: var(--bui-border-radius);
}

.bui-shape-square {
    border-radius: 0;
}

.bui-shape-round {
    padding: var(--bui-padding-top-bottom) !important;
    border-radius: 50%;
}
.bui-shape-round:after {
    content: '';
    padding-top: 100%;
}

.bui-shape-pill {
    border-radius: 100vh;
}

/***************************************************************************************/
/* Transitions */

/* Fade */
.bui-fade-enter-active,
.bui-fade-leave-active {
    transition: opacity .25s ease;
}
.bui-fade-enter-from,
.bui-fade-leave-to {
    opacity: 0;
}

/* Expand */
.bui-expand-enter-from,
.bui-expand-leave-to {
    max-height: 0;
}
.bui-expand-enter-to,
.bui-expand-leave-from {
    max-height: 1000px;
}
.bui-expand-leave-active {
    overflow: hidden;
    transition: max-height .25s cubic-bezier(0, 1, 0, 1);
}
.bui-expand-enter-active {
    overflow: hidden;
    transition: max-height 1s ease-in-out;
}
/******************************************************************************
*  Copyright (C) 2021 Broadcom.
*  The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
*  See LICENSE for terms and conditions.
******************************************************************************/
:root /* Color Palette */ {
    /* Base Color */
    --bui-base-color-hs: 0, 0%;
    --bui-base-background-color-l: 99%;
    --bui-base-foreground-color-l: 10%;
    /* Neutral Color */
    --bui-neutral-color-hs: 0, 0%;
    --bui-neutral-background-color-l: 60%;
    --bui-neutral-foreground-color-l: 97%;
    /* Primary Color */
    --bui-primary-color-hs: 200, 100%;
    --bui-primary-background-color-l: 27%;
    --bui-primary-foreground-color-l: 97%;
    /* Secondary Color */
    --bui-secondary-color-hs: 208, 7%;
    --bui-secondary-background-color-l: 50%;
    --bui-secondary-foreground-color-l: 97%;
    /* Success Color */
    --bui-success-color-hs: 152, 69%;
    --bui-success-background-color-l: 31%;
    --bui-success-foreground-color-l: 97%;
    /* Danger Color */
    --bui-danger-color-hs: 348, 92%;
    --bui-danger-background-color-l: 42%;
    --bui-danger-foreground-color-l: 97%;
    /* Warning Color */
    --bui-warning-color-hs: 45, 90%;
    --bui-warning-background-color-l: 52%;
    --bui-warning-foreground-color-l: 3%;
    /* Info Color */
    --bui-info-color-hs: 194, 100%;
    --bui-info-background-color-l: 39%;
    --bui-info-foreground-color-l: 97%;
    --bui-info-background-color: hsl(var(--bui-info-color-hs), var(--bui-info-background-color-l));
    /* Muted Lightness */
    --bui-muted-color-hs: 0, 0%;
    --bui-muted-background-color-l: 93%;
    --bui-muted-foreground-color-l: 20%;

    /* colors for table */
    --bui-th-bg-l: 85%;
    --bui-th-fg-l: 27%;
    --bui-td-bg-odd-l: 99%;
    --bui-td-bg-even-l: 96%;
    --bui-tr-bg-hover-l: 90%;
    --bui-tr-bg-selected-l: 93%;
}

/******************************************************************************************************/

:root[theme='dark'] {
    --bui-base-background-color-l: 7%;
    --bui-base-foreground-color-l: 80%;
    --bui-neutral-background-color-l: 40%;
    --bui-neutral-foreground-color-l: 90%;
    --bui-primary-background-color-l: 37%;
    --bui-primary-foreground-color-l: 90%;
    --bui-secondary-background-color-l: 56%;
    --bui-secondary-foreground-color-l: 90%;
    --bui-success-background-color-l: 41%;
    --bui-success-foreground-color-l: 90%;
    --bui-danger-background-color-l: 52%;
    --bui-danger-foreground-color-l: 90%;
    --bui-warning-background-color-l: 62%;
    --bui-warning-foreground-color-l: 10%;
    --bui-info-background-color-l: 49%;
    --bui-info-foreground-color-l: 90%;
    --bui-muted-background-color-l: 20%;
    --bui-muted-foreground-color-l: 50%;

    /* colors for table */
    --bui-th-bg-l: 25%;
    --bui-th-fg-l: 50%;
    --bui-td-bg-odd-l: 12%;
    --bui-td-bg-even-l: 14%;
    --bui-tr-bg-hover-l: 18%;
    --bui-tr-bg-selected-l: 16%;
}

:root {
    --bui-base-background-color: hsl(var(--bui-base-color-hs), var(--bui-base-background-color-l));
    --bui-base-foreground-color: hsl(var(--bui-base-color-hs), var(--bui-base-foreground-color-l));
    --bui-neutral-background-color: hsl(var(--bui-neutral-color-hs), var(--bui-neutral-background-color-l));
    --bui-neutral-foreground-color: hsl(var(--bui-neutral-color-hs), var(--bui-neutral-foreground-color-l));
    --bui-muted-background-color: hsl(var(--bui-muted-color-hs), var(--bui-muted-background-color-l));
    --bui-muted-foreground-color: hsl(var(--bui-muted-color-hs), var(--bui-muted-foreground-color-l));

    /* colors for table */
    --bui-th-bg: hsl(var(--bui-primary-color-hs), var(--bui-th-bg-l));
    --bui-th-fg: hsl(var(--bui-primary-color-hs), var(--bui-th-fg-l));
    --bui-td-bg-odd: hsl(var(--bui-primary-color-hs), var(--bui-td-bg-odd-l));
    --bui-td-fg-odd: var(--bui-base-foreground-color);
    --bui-td-bg-even: hsl(var(--bui-primary-color-hs), var(--bui-td-bg-even-l));
    --bui-td-fg-even: var(--bui-base-foreground-color);
    --bui-tr-bg-hover: hsl(var(--bui-primary-color-hs), var(--bui-tr-bg-hover-l));
    --bui-tr-bg-selected: hsl(var(--bui-primary-color-hs), var(--bui-tr-bg-selected-l));
}

body {
    margin: 0;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.2;
    color: var(--bui-base-foreground-color);
    background-color: var(--bui-base-background-color);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.bui-primary {
    --bui-component-color-hs: var(--bui-primary-color-hs);
    --bui-component-background-color-l: var(--bui-primary-background-color-l);
    --bui-component-foreground-color-l: var(--bui-primary-foreground-color-l);
}
.bui-secondary {
    --bui-component-color-hs: var(--bui-secondary-color-hs);
    --bui-component-background-color-l: var(--bui-secondary-background-color-l);
    --bui-component-foreground-color-l: var(--bui-secondary-foreground-color-l);
}
.bui-success {
    --bui-component-color-hs: var(--bui-success-color-hs);
    --bui-component-background-color-l: var(--bui-success-background-color-l);
    --bui-component-foreground-color-l: var(--bui-success-foreground-color-l);
}
.bui-danger {
    --bui-component-color-hs: var(--bui-danger-color-hs);
    --bui-component-background-color-l: var(--bui-danger-background-color-l);
    --bui-component-foreground-color-l: var(--bui-danger-foreground-color-l);
}
.bui-warning {
    --bui-component-color-hs: var(--bui-warning-color-hs);
    --bui-component-background-color-l: var(--bui-warning-background-color-l);
    --bui-component-foreground-color-l: var(--bui-warning-foreground-color-l);
}
.bui-info {
    --bui-component-color-hs: var(--bui-info-color-hs);
    --bui-component-background-color-l: var(--bui-info-background-color-l);
    --bui-component-foreground-color-l: var(--bui-info-foreground-color-l);
}

.bui-component {
    --bui-static-foreground-color: hsl(var(--bui-component-color-hs), var(--bui-component-foreground-color-l));
    --bui-static-background-color: hsl(var(--bui-component-color-hs), var(--bui-component-background-color-l));
    --bui-static-border-color: hsl(var(--bui-component-color-hs), var(--bui-component-background-color-l));
    --bui-hover-foreground-color: hsl(var(--bui-component-color-hs), var(--bui-component-foreground-color-l));
    --bui-hover-background-color: hsl(var(--bui-component-color-hs), calc(var(--bui-component-background-color-l) - 5%));
    --bui-hover-border-color: hsl(var(--bui-component-color-hs), calc(var(--bui-component-background-color-l) - 5%));
    --bui-focus-foreground-color: hsl(var(--bui-component-color-hs), var(--bui-component-foreground-color-l));
    --bui-focus-background-color: hsl(var(--bui-component-color-hs), var(--bui-component-background-color-l));
    --bui-focus-border-color: hsl(var(--bui-component-color-hs), calc(var(--bui-component-background-color-l) - 5%));
    --bui-focus-shadow-color: hsl(var(--bui-component-color-hs), calc(var(--bui-component-background-color-l) + 25%));
    --bui-active-foreground-color: hsl(var(--bui-component-color-hs), var(--bui-component-foreground-color-l));
    --bui-active-background-color: hsl(var(--bui-component-color-hs), calc(var(--bui-component-background-color-l) - 10%));
    --bui-active-border-color: hsl(var(--bui-component-color-hs), calc(var(--bui-component-background-color-l) - 10%));
    /***/
    --bui-padding-top-bottom: 0.375em;
    --bui-padding-left-right: 0.750em;
    --bui-link-button-padding: 0.31em;
    --bui-link-font-size: 0.85em;
    --bui-border-style: 1px solid;
    --bui-border-radius: 0.25em;
    --bui-focus-shadow: 0 0 0 1px var(--bui-focus-border-color), 0 0 0 3px var(--bui-focus-shadow-color);
    --bui-float-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}