:root {
  --radius-1: 12px;
  --radius-2: 20px;
  --white: #ffffff;

  --blue-0: #2EB2E8;
  --blue-1: #0070BA;
  --blue-2: #005799;
  --blue-3: #004077;
  --blue-4: #A1CAE5;
  --dark-1: #2D2D2D;
  
}

* {
  font-family: "PT Sans";
}

// li {
//   list-style-image: url("~src/assets/images/icons/add_24dp.svg");
// }

// .btn {
//   font-weight: 500;
//   font-size: 0.875rem;
//   line-height: 1.125rem;
//   letter-spacing: 0.02em;
//   text-transform: uppercase;
// }

.menu, .page-header {
  display: flex;
  .block {
    background: #fff;
    border: 1px solid #C0C0C0;
    border-radius: 12px;
    padding: 12px 24px;
    display: flex;
    margin-bottom: 16px;
    column-gap: 20px;
    button {
      background-position: center;
      background-repeat: no-repeat;
      padding: 0;
      background-color: #ffffff;
      border: none;
      border-radius: 0;
      &.up, &.down, &.edit, &.publish, &.unpublish, &.delete {
        width: 24px;
        height: 24px;
      }
      &.up {background-image: url("~src/assets/images/icons/arrow_upward_24dp.svg");}
      &.down {background-image: url("~src/assets/images/icons/arrow_downward_24dp.svg");}
      &.edit {background-image: url("~src/assets/images/icons/edit_24dp.svg");}
      &.publish {background-image: url("~src/assets/images/icons/visibility_on_24dp.svg");}
      &.unpublish {background-image: url("~src/assets/images/icons/visibility_off_24dp.svg");}
      &.delete {background-image: url("~src/assets/images/icons/trash_24dp.svg");}
    }
  }
}

.size-little {
  * {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  h1 {font-size: 1.5rem;}
}
.size-middle {
  * {
    font-size: 1rem;
    line-height: 20px;
  }
  h1 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 40px;
  }
}
.size-large {
  * {
    font-size: 1.25rem;
    line-height: 24px;
  }
  h1 {font-size: 3rem;}
}
.image-hidden {
  img, svg {
    visibility: hidden !important;
  }
  *, *::after, *::before {
    background-image: none !important;
  }
}

.style-brown {
  filter: sepia(150%) !important;
}
.style-white-black {
  filter: grayscale(100%) !important;;
}
.style-black-white {
  filter: grayscale(100%) invert(100%) !important;;
}