@import "base.scss";

@font-face {
    font-family: "SF Pro Text";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/SFProText-Regular.woff2") format("woff2"),
    url("fonts/SFProText-Regular.woff") format("woff");
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    font-family: $font;
    font-size: 18px;
    line-height: 23px;
}

.page-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 90px;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

.page-content__inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

//.main-menu, .export-sub-menu, .generate-sub-menu {
//    display: flex;
//}
//
//.main-menu-item.main-menu-item__active {
//    border-bottom: 5px solid #00832a;
//}
//
//.main-menu-item {
//    flex-direction: row;
//    padding: 4px 8px 4px;
//    margin: 5px 5px 2px 5px;
//    border-bottom: 5px solid transparent;
//}
//
//
//.main-menu-item__export {
//    margin-left: auto;
//}
//.main-menu {
//    border-bottom: 1px solid #00832a;
//    //margin-bottom: 15px;
//}
//
//
//.table-item {
//    padding: 10px;
//    transition: all ease-out 0.3s;
//    max-height: 500px;
//    opacity: 1;
//    position: relative;
//
//}
//
//.table-item:hover {
//    background: #ffe476;
//}
//
//
//.table-item:hover .product-cmp {
//    background: #fff;
//}
//.table-item__product-components {
//    margin-left: -5px;
//}
//.table-item__hidden {
//    max-height: 0;
//    opacity: 0;
//    padding: 0;
//}
//.table-item__hidden-full {
//    display: none;
//}
//.table-item-action {
//    cursor: pointer
//}
//
//
//.tag {
//    color: #125ba1;
//    font-style: italic;
//    font-size: 14px;
//    margin-left: 8px;
//}
//
//.product-cmp {
//    border-radius: 8px;
//    background: #fff3ca;
//    padding: 1px 5px;
//    font-size: 12px;
//}
//.product-title {
//    font-size: 17px;
//    margin-right: 16px;
//}
//
//
//textarea.export-data {
//    width: calc(100% - 32px);
//    margin: 16px 0 5px 14px;
//    height: calc(100vh - 200px);
//}
//
//.export-sub-menu {
//    margin-right: 10%;
//    margin-bottom: 10px;
//}
//.export-sub-menu .main-menu-item,
//.product-filter__title, .product-filter,
//.generate-sub-menu .main-menu-item{
//    color: #fff;
//}
//.main-menu-item {
//    cursor: pointer;
//    transition: all 0.5s;
//}
//
//.product-filter {
//    display: flex;
//    padding: 5px;
//}
//.product-filter__title {
//    font-size: 20px;
//    padding-top:4px;
//}
//.product-filter__input {
//    margin-left: 20px;
//    padding: 4px 10px;
//    font-size: 20px;
//    font-family: Verdana;
//    flex-grow: 1;
//}
//.product-filter__label {
//    margin-right: 16px;
//}
//.highlighted {
//    background: #00832a;
//    color: #fff;
//}
//.product-filter__hint {
//    margin-right: 16px;
//}
//
//
//input:focus, textarea:focus, select:focus {
//    outline-color: #00832a;
//}
//.product-filter__area, .title-gradient {
//    background: linear-gradient(181deg, #afca0b, #00832a);
//    padding: 12px 8px 16px;
//}
//
//.export-panel .title-gradient {
//    padding-bottom: 0;
//}
//.export-panel .main-menu-item.main-menu-item__active,
//.generate-panel .main-menu-item.main-menu-item__active{
//    border-bottom: 5px solid #fff;
//}
//body {margin: 0; padding: 0}
//
//.tag-manipulations {
//    padding: 8px;
//}
//.tag-manipulations__not-active {
//    opacity: 0.3;
//    pointer-events: none;
//}
//
//.cmp-tag-field {
//    display: inline-block;
//    width: 300px;
//    position: relative;
//}
//.cmp-tag-input {
//    width: 100%;
//    box-sizing: border-box;
//}
//.cmp-tag-dropdown {
//    position: absolute;
//    width: 100%;
//    background: #fff;
//    border: 1px solid #158b26;
//    box-sizing: border-box;
//    margin-top: -1px;
//    z-index: 1;
//}
//.cmp-tag-dropdown-item {
//    margin: 8px;
//}
//.cmp-tag-dropdown__hidden {
//    display: none;
//}
//.table-item-action {
//    display: none;
//    cursor: pointer;
//    color: #a00;
//    position: absolute;
//    top: -4px;
//}
//
//.table-item:hover .table-item-action {
//    display: inline-block;
//}
//
//.product-description {
//    font-size: 14px;
//    padding: 16px 0 8px;
//    max-width: 480px;
//}
//.quiz-answer-label {
//    display: block;
//}
//textarea.generate-debug {
//    width: calc(100% - 32px);
//    margin: 16px 0 5px 14px;
//    height: 500px;
//}
//
//.tag-manipulations-add-tag__comment {
//    font-size: 12px
//}
//
//.tag-manipulations-add-tag__comment span{
//    margin-left: 16px
//}
//.product-title {
//    cursor: pointer;
//}
//
//.generate-title {
//    font-size: 18px;
//    margin: 16px
//}
//
//.quiz-answer-label {
//    margin: 16px 32px 16px 16px;
//}
//.quiz-answer-label input {
//    margin-right:8px
//}
//.generate-controls {
//    margin:16px
//}
//.generate-seed-label {
//    margin: 0 8px 0 32px
//}
//.generate-example {
//    position: relative;
//}
//.generate-image {
//    position: relative;
//    float: right;
//    width: 265px;
//    margin: -20px 16px 16px;
//    border: 2px solid #429d1e;
//}
//.generate-image img {
//    width: 100%;
//}
