/*
  Bootstrapに@layer bootstrapを追加すること。
*/
@import "bootstrap4_alpha.css";

@layer pcmsx {
    :root {
        --bs-border-radius: 0.25rem;

        --pcmsx-text-color: #292b2c;
        --pcmsx-icon-color: #464a4c;
        --pcmsx-link-color: #0275d8;
        --pcmsx-link-hover-color: #014c8c;
        --pcmsx-bootstrap-primary-color: #0275d8;
        --pcmsx-bootstrap-primary-hover-color: #025aa5;
        --pcmsx-bootstrap-success-color: #006400;
        --pcmsx-bootstrap-info-color: #008299;
        --pcmsx-bootstrap-info-hover-color: #138496;
    }

    body:has([class^="edit-"]) {
        @media (min-width: 992px) {
            .col-lg-2 {
                max-width: 13rem;
            }
            .col-lg-10 {
                min-width: calc(100% - 13rem);
            }
        }
    }

    .workspace-bar {
        ul {
            margin-bottom: 0 !important;
        }
    }

    .form-control {
        border-color: #757575;

        &:not(.form-control-sm) {
            padding-block: 0.5rem;
            height: initial;
        }
    }

    .form-control-sm {
        height: initial;
    }

    .form-control-lg,
    .input-group-lg > .form-control,
    .input-group-lg > .input-group-addon,
    .input-group-lg > .input-group-btn > .btn {
        padding: 0.75rem 0.77rem;
        height: initial;
    }

    a {
        color: var(--pcmsx-link-color);

        &:hover,
        &:focus {
            color: var(--pcmsx-link-hover-color);
        }
    }

    .btn-sm,
    .custom-select {
        line-height: 1.25;
    }

    .select-action {
        font-size: 0.875rem;
    }

    .btn-primary {
        background-color: var(--pcmsx-bootstrap-primary-color);
        color: #fff;

        &:hover,
        &:focus {
            background-color: var(--pcmsx-bootstrap-primary-hover-color);
            color: #fff;
        }
    }

    .btn-outline-primary {
        border-color: var(--pcmsx-bootstrap-primary-color);
        color: var(--pcmsx-bootstrap-primary-color);

        &:hover,
        &:focus {
            background-color: var(--pcmsx-bootstrap-primary-color);
            color: #fff;
        }
    }

    .btn-secondary {
        background-color: #fff;
        color: var(--pcmsx-text-color);

        &:hover,
        &:focus {
            background-color: #e6e6e6;
            color: var(--pcmsx-text-color);
        }
    }

    .btn-success {
        border-color: var(--pcmsx-bootstrap-success-color);
    }

    .btn-info {
        border-color: var(--pcmsx-bootstrap-info-color);
        background-color: var(--pcmsx-bootstrap-info-color);

        &:hover,
        &:focus {
            background-color: var(--pcmsx-bootstrap-info-hover-color);
            border-color: var(--pcmsx-bootstrap-info-hover-color);
        }
    }

    .badge-default {
        background-color: #6c757d;
        color: #fff;
    }

    .copy-url {
        .fa {
            vertical-align: top;
        }
    }

    #clipboard-file-a {
        color: var(--pcmsx-icon-color);
    }

    .table {
        th,
        td {
            border-color: #eceeef;
        }
    }

    .modal-dialog {
        pointer-events: initial;
    }

    @media (width <= 768px) {
        #page-title {
            .btn {
                font-size: initial !important;
            }
        }
    }
}