CreativeButton

@import 'systemDefaults'
@import 'breakpoints'

.borderdialog-section
    display: flex
    flex-direction: column

    &__button
        margin-left: 0.25rem

#borderdialog-section__label_color
    min-width: unset

#borderdialog-section__prefix_r,
#borderdialog-section__prefix_g,
#borderdialog-section__prefix_b,
#borderdialog-section__prefix_a
    padding: 0 0.25rem

.borderdialog-section__button
    width: unset

.borderdialog-optionblock
    display: inline-flex
    justify-content: space-between
    align-items: center
    margin: 0.25rem 0

    &__label
        display: inline-flex
        margin: 0 0.25rem
        min-width: 7.5rem
    
    &__range
        display: inline-flex
        height: 0.15rem
        margin: 0 0.25rem
    
    &__field
        display: inline-flex
        height: 2.0rem
        width: 3rem
        border: solid 2px rgba(255,255,255,0.3)
        margin: 0 0.25rem
    
    &__button
        height: 0.8rem
        width: 0.8rem
        font-size: 0.7rem
        margin: 0 0.25rem

        &::after
            left: -35% !important

/* Color Block
.borderdialog-rgbacodeblock
    display: flex
    justify-content: space-between
    align-content: center
    margin: 0.25rem

    &__label
        display: inline-flex
        align-items: center
        margin-right: 1.6rem

    &__prefix
        display: inline-flex
        align-items: center
        height: 2.0rem
        background: rgba(255, 255, 255, 0.3)
        border: solid 2px rgba(255, 255, 255, 0.3)
        padding: 0 0.5rem
        margin: 0 0.25rem

    &__rgba
        width: 1.8rem
        font-family: 'Montserrat', sans-serif
        font-size: 1rem
        color: rgba(255, 255, 255, 1.0)
        padding-left: 0.25rem
        background: rgba(255, 255, 255, 0.0)
        border: none

    &__resultcolor
        display: inline-block
        position: relative
        width: 2.0rem
        height: 2.0rem
        background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%)
        background-size: 20px 20px
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px
        border: solid 2px rgba(255, 255, 255, 0.3)
        transition: all 0.3s
        margin: 0 0.25rem
        
        &:before
            display: block
            background: rgba(255, 0, 0, 1.0)
            content: ""
            border: solid 2px rgba(255, 255, 255, 0.3)
            border-radius: 3px
            height: 100%
            width: 100%
            position: absolute
            top: -2px
            left: -2px

        &:hover
            border: solid 2px rgba(255, 255, 255, 0.3)
            transform: scale(0.90)

        &:active
            border: solid 2px rgba(255, 255, 255, 0.9)
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

/* Code Block
.borderdialog-codeblock
    &__panel
        display: inline-block
        background: rgba(255, 255, 255, 0.1)
        border-radius: 5px
        margin: 0.25rem 0.25rem 0.3rem 0.25rem

    &__codetab
        display: inline-block
        margin-left: 2rem
        padding: 0.5rem
        background: rgba(35, 52, 99, 1.0)
    
    &__copy
        display: inline-block
        float: right
        height: 1.0rem
        font-size: 0.8rem
        padding: 0.59rem
        border-top-right-radius: 5px
        cursor: pointer
        transition: all 0.3s

        &:hover
            background: rgba(255, 255, 255, 0.3)

        &:active
            background: rgba(0, 0, 0, 0.3)
    
    &__codearea
        display: flex
        padding-top: 0.25rem
        padding-bottom: 0.5rem
        font-family: monospace
        font-size: 1.2em
        overflow: scroll
        -ms-overflow-style: none
        scrollbar-width: none
        height: 4.5rem
        background: rgba(35, 52, 99, 1.0)
        border-radius: 0 0 5px 5px

        &::-webkit-scrollbar
            display: none

    &__linenumbers
        line-height: 1.5rem
        padding: 0.25rem 0.75rem
        white-space: pre-wrap

    &__code
        line-height: 1.5rem
        padding: 0.25rem 0
        user-select: text
        white-space: pre-wrap

        & > *
            user-select: auto