@import "../../css/colors.css";
@import "../../css/z-index.css";
@import "../../css/filters.css";

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

.body {
    background: $ui-modal-background;
    padding: 1.5rem 2.25rem;
    max-height: calc(100vh - 150px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.open-buttons {
    display: flex;
    gap: 1rem;
}
.open-button {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
    background: none;
    padding: 0.5rem;
    margin: 0;
    border: 2px solid $ui-black-transparent;
    border-radius: 0.5rem;
}
.open-button:hover {
    color: $looks-secondary;
    border-color: $looks-secondary;
}
.open-button-image {
    width: 64px;
    height: 64px;
    background-color: currentColor;
    mask-size: cover;
    mask-repeat: no-repeat;
}
.system-image {
    mask-image: url(./system.svg);
}
.custom-image {
    mask-image: url(./custom.svg);
}
.open-button-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.open-button-text-main {
    font-weight: bold;
}
.open-button-text-sub {

}

.font-input-outer {

}
.font-input {
    width: 100%;
    border: 1px solid $ui-black-transparent;
    border-radius: 0.25rem;
    padding: 0 1rem;
    height: 3rem;
    font: inherit;
    color: $text-primary;
    background-color: $input-background;
}

.font-dropdown-outer {
    position: absolute;
    z-index: $z-index-modal;
    background-color: $ui-white;
    color: $text-primary;
    border-radius: 0.25rem;
    overflow: auto;
    max-height: 300px;
    border: 1px solid $ui-black-transparent;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px 1px $shadow;
}
.font-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    height: 1.5rem;
    cursor: pointer;
    transition: .1s ease;
}
.font-dropdown-item:hover {
    background-color: $looks-secondary;
    color: #ffffff;
}

.font-playground {
    background: none;
    border: none;
    padding: 0.5rem;
    margin: 0;
    resize: none;
    width: 100%;
    height: 100px;
    font-size: 1.5rem;
    border: 1px solid $ui-black-transparent;
    border-radius: 0.25rem;
}

.button {
    font: inherit;
    font-weight: bold;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    border: 1px solid $ui-black-transparent;
    background-color: $looks-secondary;
    color: white;
}
.button:disabled {
    opacity: 0.8;
}

.fallback-container {
    display: flex;
    flex-direction: column;
}
.fallback-label {
    margin-bottom: 0.5rem;
}
.fallback-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.25rem
}
.fallback-button {
    background: none;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fallback-button:hover {
    color: $looks-secondary;
}
.fallback-container .fallback-button-selected {
    background-color: $looks-secondary;
    color: white;
}

.fonts-outer {
    border-top: 2px solid $ui-black-transparent;
    padding-top: 1rem;
}
.fonts-outer p {
    margin-bottom: 0.5rem;
}

.fonts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manage-font {
    width: 100%;
    display: flex;
    align-items: center;
    border: 2px solid $ui-black-transparent;
    border-radius: 0.5rem;
    padding: 0.5rem;
    gap: 0.5rem;
}
.manage-font-name {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

.manage-font-buttons {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.manage-font-button {
    background: none;
    border: none;
    border-radius: 100%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.manage-font-button:hover {
    background-color: $ui-black-transparent;
}
.manage-font-button img {
    display: block;
    width: 100%;
    height: 100%;
    filter: $filter-icon-black;
}