@import './style-dictionary.scss'
@import './functions.scss'


[class*="display"]
    font-weight: $weight-font-regular

h1, h2, h3
    color: $color-basic-medium



.md-button
    md-icon
        display: inline-block !important

.md-icon-button
    md-icon
        display: flex !important

.md-button.md-icon-button.default-button
    height: 24px
    margin: 4px
    max-height: 24px
    max-width: 24px
    min-height: 24px
    min-width: 24px
    padding: 2px !important
    width: 24px

    md-icon
        align-items: center
        font-size: 20px
        justify-content: center
        display: flex
        height: 20px
        min-height: 20px
        min-width: 20px
        width: 20px

.md-button.md-icon-button.small-button
    height: 20px
    margin: 4px
    max-height: 20px
    max-width: 20px
    min-height: 20px
    padding: 2px !important
    width: 20px

    md-icon
        align-items: center
        font-size: 14px
        justify-content: center
        display: flex
        height: 14px
        min-height: 14px
        min-width: 14px
        width: 14px

md-checkbox
    &.md-checked.cyan
        .md-container
            .md-icon
                background: $color-cyan-medium

md-checkbox.md-checkbox-small
    .md-icon
        height: 12px
        width: 12px

    .md-container
        height: 12px
        width: 12px

    &.md-checked
        .md-icon
            &:after
                left: 1.4px
                top: -1px
                width: 5px
                height: 8px

    &[disabled]
        opacity: .33

md-dialog

    &.md-dialog--larger
        width: 900px

    md-dialog-actions
        padding: 0 $spacing-medium $spacing-small $spacing-medium !important

    .md-title
        color: $color-basic-dark
        font-weight: $weight-font-semi-bold
        font-size: $font-display-3

    .md-dialog-content
        padding: $spacing-medium !important

    .md-icon-button
        margin: 0 !important

        md-icon
            color: $color-basic-lighter
        
    .margin-negative-t-md
        margin-top: -16px !important

    .md-dialog-content-body > p
        color: $color-basic-dark
        font-weight: $weight-font-regular
        font-size: $font-display-5
        margin-top: $spacing-medium !important

    .md-button.md-cancel-button
        border-radius: $radius-small
        padding: 2px 18px
        text-transform: none
        font-size: 12px
        background-color: transparent
        border: 1px solid $color-basic-medium
        color: $color-basic-medium
        height: 40px
        padding: 0 20px
        border: 1px solid $color-basic-light
        color: $color-basic-light !important
        min-width: 135px

    .md-button.md-confirm-button
        background: $color-cyan-dark !important
        color: $color-white-medium !important
        border-radius: 8px
        font-size: 12px
        font-weight: $weight-font-semi-bold
        height: 40px
        padding: 0 20px
        text-transform: none
        min-width: 135px

        &.md-confirm-button--large
            width: 168px

md-icon
    outline: 0

i
    outline: 0

md-input-container.default-input
    font-size: $font-display-5
    margin-top: 18px !important
    
    input
        color: $color-basic-darker
        

md-input-container
    margin-bottom: 0 !important
    margin-top: 24px !important

    input, textarea
        border-color: $color-basic-lighter !important
        color: $color-basic-dark !important

    label
        color: $color-basic-medium !important

        &::after
            display: none !important

    .md-errors-spacer
        display: none

md-list
    padding: 0

    md-list-item, .md-button, .md-list-item-inner, p,
        height: 32px !important
        max-height: 32px !important
        min-height: 32px !important

    p
        line-height: 32px !important

    .md-button
        padding: 0 !important

    md-list-item
        border-bottom: 1px solid $color-gray-medium

.ellipsis-props
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

.nu-card
    background: $color-white-medium
    border-radius: 8px
    box-shadow: $shadow-base
    padding: $spacing-medium
    position: relative
    overflow: hidden
    transition: 0.4s

    &:hover
        box-shadow: 0 8px 16px rgba(0, 95, 103, 0.16)

.horizontal-divider
    background-color: #D5E1E5
    width: inherit
    height: 0.5px

.color-blue-medium
    color: #5B90AB

.vertical-divider
    background-color: $color-basic-light
    height: inherit
    width: 2px

    &.vertical-divider--lighter
        background-color: $color-basic-lighter

//Font Sizes
.display-1
    font-size: $font-display-1

.display-2
    font-size: $font-display-2

.display-3
    font-size: $font-display-3

.display-4
    font-size: $font-display-4

.display-5
    font-size: $font-display-5

.display-6
    font-size: $font-display-6

.display-7
    font-size: $font-display-7


// Text colors
.text-basic
    color: $color-basic-medium

.text-basic-dark
    color: $color-basic-dark

// Text weight
.text-bold
    font-weight: $weight-font-bold

.text-light
    font-weight: $weight-font-light

.text-medium
    font-weight: $weight-font-medium !important

.text-semi-bold
    font-weight: $weight-font-semi-bold
    
// Text align
.text-right
    text-align: right !important

.text-left
    text-align: left

.text-center
    text-align: center

// Aux Class
ul.list-simple
    margin: 0
    padding: 0

    li
        list-style: none

    &.broken-column
        columns: 2
.bg-white
    background-color: $color-white-medium
.cursor-pointer
    cursor: pointer

.full-height
    height: 100%

.full-vh
    height: 80vh !important

.full-width
    min-width: 100%
    width: 100%

.width-5
    width: 5% 
    min-width: fit-content

.width-7
    min-width: 7%
    width: 7%
    max-width: 7%

.width-30
    min-width: 30%
    width: 30%

.width-40
    min-width: 40%
    width: 40%

.width-80
    min-width: 80%
    width: 80%

.width-90
    min-width: 90%
    width: 90%

md-icon.md-icon-content
    margin-right: $spacing-small
    min-width: fit-content
    width: fit-content

.margin-0
    margin: 0 !important

.margin-b-0
    margin-bottom: 0 !important

.margin-small
    margin: $spacing-small

.margin-md 
    margin: $spacing-medium

.margin-top-medium
    margin-top: $spacing-medium

.margin-top-small
    margin-top: $spacing-small
    
.margin-bottom-large
    margin-bottom: $spacing-large

.margin-right-small
    margin-right: $spacing-medium

.margin-left-medium
    margin-left: $spacing-medium

.margin-l-r-medium
    margin: 0 $spacing-medium

.margin-l-r-small
    margin: 0 $spacing-small

.margin-t-mm
    margin-top: 26px;
    
.margin-t-b-small
    margin-bottom: $spacing-medium

.margin-negative-t-md
    margin-top: -16px !important

.margin-negative-l-md
    margin-left: -16px

.margin-negative-l-sm
    margin-left: -8px

.mr-0
    margin-right: 0

.pad-0
    padding: 0 !important

.pad-0-medium
    padding: 0 $spacing-medium

.pad-h-xs
    padding: 0 4px !important

.pad-l-xs
    padding-left: 4px !important

.pad-0-small
    padding: 0 $spacing-small

.pad-small-0
    padding: $spacing-small 0 !important

.pad-l-medium
    padding-left: $spacing-medium !important

.pad-l-small
    padding-left: $spacing-small

.pad-r-medium
    padding-right: $spacing-medium !important

.pad-r-small
    padding-right: $spacing-small

.pad-t-small
    padding-top: $spacing-small

.pad-t-medium
    padding-top: $spacing-medium

.pad-t-large
    padding-top: $spacing-large

.pad-small
    padding: $spacing-small

.position-relative
    position: relative

.outline-none
    outline: none

.overflow-x-hidden
    overflow-x: hidden

.text-basic
    color: $color-basic-medium

.text-size-l
    font-size: 32px

.no-transform
    text-transform: none !important

.text-white-md
    color: $color-white-medium

.text-regular
    font-weight: $weight-font-regular !important

.text-truncate
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

.column__highlight
    background-color: rgba($color-cyan-lighter, .33)

.reset-margin-md
    margin: -16px !important

.z-index-2
    position: relative
    z-index: 2

// height inherit
.height-inherit
    height: inherit

// class for version style
.app-version
    color: $color-basic-medium
    font-size: $font-display-5

.app-version-container
    max-height: 22px !important
    height: 22px !important
    min-height: 22px !important

// Background
.bg-cyan-lightness
    background: rgba($color-cyan-lighter, .2) !important
.bg-yellow-lightness
    background: rgba($color-yellow-light, .2) !important
.bg-yellow-lighter
    background: rgba($color-yellow-lighter, .2) !important

.scroll
    &::-webkit-scrollbar
        width: 8px
        height: 8px

    &::-webkit-scrollbar-track
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2)
        border-radius:  $radius-small


    &::-webkit-scrollbar-thumb
        background: rgba(153, 182, 204, 0.4)
        border-radius: $radius-small

    

@media(max-width: 600px)

    md-checkbox.md-checkbox-small
        .md-icon
            height: 16px
            width: 16px

        .md-container
            height: 16px
            width: 16px

        &.md-checked
            .md-icon
                &:after
                    left: 3px
                    top: 0px
                    width: 6px
                    height: 10px