.bg-mask
    background-color: black
    z-index: 1
    filter: opacity(20%)
    position: fixed
    width: 100%
    height: 100%
    left: 0
    top: 0
    display: none

@mixin modal
    z-index: 2
    display: none
    position: fixed
    width: 500px
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    background-color: $color-bright
    padding: 20px 20px 10px 20px
    color: $color-secondary
    & &__head
        margin-bottom: 20px
        &::after
           @include clear 

    & &__title
        font-weight: bold
        font-size: 1.2em
        float: left

    & &__close-button
        float: right
        cursor: pointer

    & &__body
    
    & &__confirm-button
        float: right

.mark-modal
    @include modal
    & input[type="radio"]
        margin-right: 0

    & &__rating-star
        display: inline
        float: left
        position: relative
        left: -3px

    & &__status-radio
        float: right
        & ul
            margin-bottom: 0
        & li, & label
            display: inline
        & input[type="radio"]
            position: relative
            top: 1px

    & &__clear
        @include clear
            
    & &__content-input, & form textarea
        height: 200px
        width: 100%
        margin-top: 5px
        margin-bottom: 5px
        resize: vertical

    & &__tag
        // margin-top: 10px
        margin-bottom: 20px

    & &__option
        margin-bottom: 24px
        &::after
            @include clear

    & &__visibility-radio
        float: left
        & ul, & li, & label
            display: inline
        & label
            font-size: normal
        & input[type="radio"]
            position: relative
            top: 2px

    & &__share-checkbox
        float: right
        & input[type="checkbox"]
            position: relative
            top: 2px

.confirm-modal
    @include modal

.announcement-modal
    @include modal

    & &__body
        overflow-y: auto
        max-height: 64vh
        & .announcement
            &__title
                display: inline-block

            &__datetime
                color: $color-light
                margin-left: 10px 

            &__content
                word-break: break-all

.add-to-list-modal
    @include modal

// Small devices (landscape phones, 576px and up)
@media (max-width: $small-devices)
    .mark-modal, .confirm-modal, .announcement-modal .add-to-list-modal
        width: 100%
// Medium devices (tablets, 768px and up)
@media (max-width: $medium-devices)
	pass
// Large devices (desktops, 992px and up)
@media (max-width: $large-devices)
    pass
// Extra large devices (large desktops, 1200px and up)
@media (max-width: $x-large-devices)
    pass