@import "../../css/colors.css";

.modal-content {
    max-width: 550px;
    margin-top: 50px;
}

.body {
    background: $ui-white;
    padding: 1.5rem 2.25rem;
}

.body p,
.unsandboxed-container,
.url-input,
.text-code-input {
    margin: 1rem 0;
    display: block;
}

.type-selector-container {
    display: flex;
    justify-content: space-around;
}
.type-selector-button {
    width: 100%;
    cursor: pointer;
    border-bottom: 0.25rem solid $ui-tertiary;
    margin: 0 1rem;
    padding: 0.5rem 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.type-selector-button[data-active="true"] {
    border-color: $looks-secondary;
}
.type-selector-button:active {
    border-color: $looks-transparent;
}

.url-input,
.text-code-input {
    width: 100%;
    border: 1px solid $ui-black-transparent;
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-size: inherit;
}
.url-input {
    height: 3rem;
}
.text-code-input {
    min-height: 3rem;
    height: 8rem;
    min-width: 100%;
    max-width: 100%;
    font-family: monospace;
}

.unsandboxed-container {
    display: flex;
    align-items: center;
}
.unsandboxed-checkbox {
    margin-right: 0.5rem;
}
.trusted-extension,
.unsandboxed-warning {
    padding: 0.5rem;
    border-radius: 0.25rem;
}
.trusted-extension {
    background-color: rgba(94, 255, 94, 0.25);
    border: 1px solid green;
}
.unsandboxed-warning {
    background-color: rgba(255, 81, 81, 0.25);
    border: 1px solid red;
}
.unsandboxed-warning > *:not(:last-child) {
    display: block;
    margin-bottom: 4px;
}

.button-row {
    display: flex;
    justify-content: flex-end;
}
.load-button {
    font: inherit;
    color: inherit;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    border: 1px solid $ui-black-transparent;
    font-weight: 600;
    font-size: 0.85rem;
    color: white;
    background: $looks-secondary;
}
.load-button:disabled {
    opacity: 0.8;
}