//- 💫 CSS > COMPONENTS > MISC

.x-terminal
    background: $color-subtle-light
    color: $color-front
    padding: $border-radius
    border-radius: 1em
    width: 100%
    position: relative

    &.x-terminal--small
        background: $color-dark
        color: $color-subtle
        border-radius: 4px
        margin-bottom: 4rem

.x-terminal__icons
    position: absolute
    padding: 10px

    &:before,
    &:after,
    span
        @include size(15px)
        display: inline-block
        float: left
        border-radius: 50%
        margin-right: 10px

    &:before
        content: ""
        background: $color-red

    span
        background: $color-green

    &:after
        content: ""
        background: $color-yellow

    &.x-terminal__icons--small
        &:before,
        &:after,
        span
            @include size(10px)


.x-terminal__code
    margin: 0
    border: none
    border-bottom-left-radius: 5px
    border-bottom-right-radius: 5px
    width: 100%
    max-width: 100%
    white-space: pre-wrap


.x-terminal__button.x-terminal__button
    @include position(absolute, bottom, right, 2.65rem, 2.6rem)
    background: $color-dark
    border-color: $color-dark

    &:hover
        background: darken($color-dark, 5)
        border-color: darken($color-dark, 5)