// SCSS variables
@use "variables" as *;

// region .......... DEFAULT SLOGI DOLOČENIH ELEMENTOV
html {
  height: 100vh;
}
body, #vue-root-element {
  height: 100%;
}
body {
  background-color: #C2E2F2;
}

// endregion .......... DEFAULT SLOGI DOLOČENIH ELEMENTOV

// region .......... DATA KOMPONENTE (classi, ki veljajo samo v Monimi)
button.mnm-data-element {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.12em 0.6em 0.15em 0.5em;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 0.4em;
  box-shadow: 0 0 4px 4px #77777711;
  filter: brightness(.97) saturate(.7);
  gap: 0.4em;
  &:hover {
    filter: unset;
  }
  .mnm-data-icon {
    padding-top: 0.1em;
  }
}
// endregion .......... DATA KOMPONENTE (classi, ki veljajo samo v Monimi)

// region .......... DATA-GRID in DATA-FORM (templates za okna)
.mnm-grid-template {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--mnm-padding-unit-px) * 0.25);
  &.developer .mnm-developer-code {
    pre {
      font-size: 13px;
      height: 100%;
      overflow: auto;
      background-color: #222222;
      border: 1px solid #CCCCCC;
      padding: 1em 0em;
    }
  }
}
// endregion .......... DATA-GRID in DATA-FORM (templates za okna)

// region .......... SITES
.mnm-grid-template.sites {
  font-family: "Inter", Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #AAA;
  line-height: 1.3em;
  background-color: white;
  padding: 0.6em;
  height: unset;
  min-height: 100%;
  gap: 0.8em;

  h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  h4 {
    font-size: 1.3em;
  }

  .mnm-flex-column {
    gap: 0;
  }
  .mnm-flex-row {
    gap: 1.2em;
  }

  a, span {
    color: #444;
    border: 1px solid transparent;
    border-radius: 8px;
  }
  a {
    text-decoration: none;
    &:hover {
      color: #000;
      background-color: #00000017;
      border: 1px solid #00000034;
    }
  }

  .mnm-sites-site {
    border: 1px solid transparent;
    margin-right: 0.0em;
    padding: 0 0.5em;
  }
  .mnm-sites-vps {
    color: #009FE3;
    background-color: #009FE333;
    &:hover {
      border: 1px solid #009FE355;
      color: #009FE3;
      background-color: #009FE333;
    }
  }
  .mnm-sites-flaska {
    color: #F8971F;
    background-color: #F8971F33;
    &:hover {
      border: 1px solid #F8971F55;
      color: #F8971F;
      background-color: #F8971F33;
    }
  }
  .mnm-sites-box {
    color: #00B62F;
    background-color: #00B62F33;
    &:hover {
      border: 1px solid #00B62F55;
      color: #00B62F;
      background-color: #00B62F33;
    }
  }
  .mnm-sites-aura {
    color: #FF6A1A;
    background-color: #FF6A1A33;
    &:hover {
      border: 1px solid #FF6A1A55;
      color: #FF6A1A;
      background-color: #FF6A1A33;
    }
  }

  .mnm-sites-hostko {
    color: #125F92;
    background-color: #125F9233;
    &:hover {
      border: 1px solid #125F9255;
      color: #125F92;
      background-color: #125F9233;
    }
  }

  .mnm-sites-cloudflare {
    color: #F6821F;
    background-color: #F6821F33;
    &:hover {
      border: 1px solid #F6821F55;
      color: #F6821F;
      background-color: #F6821F33;
    }
  }


  h1, h2, h3, h4, h5, h6 {
    margin: 1.0em 0 0;
    background-color: #BBB;
    border-radius: 0.3em;
    color: white;
    padding: 6px;
    text-align: center;
    &:first-child {
      margin-top: 0;
    }
  }


  .mnm-sites-site-row {
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #DDD;
    padding: 1px 0 1px;
    flex-wrap: nowrap;

    > div {
      display: flex;
      align-items: center;
    }

    a, span {
      padding: 0em 0.3em;
    }

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      min-height: 24px;
      margin-left: 6px;
      margin-right: 6px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
    }

    .mnm-site-row-container {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .local {
      min-width: 104px;
      a {
        color: #8931ba;
      }
    }

    .production, .ponudba, .Ponudba {
      min-width: 250px;
      border-left: 1px solid #DDDDDD;
    }

    .testing {
      min-width: 104px;
      border-left: 1px solid #DDDDDD;
      a {
        color: #00883b;
      }
    }

    .other {
      min-width: 104px;
      border-left: 1px solid #DDDDDD;
      a {
        color: #009fe3;
      }
    }

    .site-first-row {
      display: flex;
      justify-content: center;
    }
    .site-second-row {
      display: flex;
      justify-content: center;
      gap: 0.2em;
      a {
        opacity: 0.5;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
}
// region .......... SITES