/*!
 * Copyright 2018-2024 adorsys GmbH & Co KG
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published
 * by the Free Software Foundation, either version 3 of the License, or (at
 * your option) any later version. This program is distributed in the hope that
 * it will be useful, but WITHOUT ANY WARRANTY; without even the implied
 * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see https://www.gnu.org/licenses/.
 *
 * This project is also available under a separate commercial license. You can
 * contact us at sales@adorsys.com.
 */

@import 'variables';

* {
  box-sizing: border-box;
  padding: 0;
}

:after,
:before {
  box-sizing: inherit;
}

html {
  font-size: var(--textFontSize);
  font-weight: var(--textFontWeight);

  @media screen and (max-width: 768px) {
    font-size: var(--textFontSize768px);
  }
  @media screen and (max-width: 1024px) {
    font-size: var(--textFontSize1024px);
  }
}

body {
  font-family: var(--fontFamily);
  margin: 0;
  color: var(--bodyFontColor);
  background-color: var(--bodyBG);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media screen and (max-width: 1080px) {
    padding-left: 0;
    padding-right: 0;
  }
}

main {
  background: var(--mainBG);
  padding: var(--mainPadding);

  &:before,
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.bold-text {
  font-weight: 800;
}

.italic-text {
  font-style: italic;
}

.bg {
  background-color: var(--tableStripedBG);
}

.th {
  background-color: var(--tableHeaderBG);
  font-weight: 900;
}

dl,
ol,
p,
ul {
  line-height: var(--textLineHeight);
}

p {
  margin: 1em 0;
}

a {
  color: var(--anchorFontColor);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--anchorFontColorHover);
  background-color: var(--anchorBGcolorHover);
  text-decoration: none;
}

ol a:before {
  content: '';
  background-image: var(--backgroundImage);
  position: absolute;
  background-repeat: no-repeat;
  margin-left: -15px;
  height: 0.625rem;
  width: 0.625rem;
  background-size: contain;
  transform: translate(-50%, 50%) rotate(270deg);
}

.divider {
  height: 6px;
  width: 77px;
  background-color: var(--colorSecondary);
  margin-top: 6vw;
  margin-bottom: 3vw;
}

.api-table {
  display: flex;
  align-items: center;
  padding-left: 1vw;
  height: 3vw;
  border-bottom: var(--tableBorderStyleBottom);
  border-left: var(--tableBorderStyleLeft);
  border-right: var(--tableBorderStyleRight);
  border-top: var(--tableBorderStyleTop);

  span {
    width: 40%;
  }
}

.json-text {
  padding: 1vw;
  color: #ffffff;
  background-color: #272822;
  white-space: pre-wrap;
  line-height: 1.3em !important;
  margin: 0;
}

.container {
  padding: 0 25px;
  margin: 0 auto;
  max-width: 1080px;

  &--fullsize {
    max-width: none;
  }
}

h1 {
  font-size: var(--h1FontSize);
  font-weight: var(--h1FontWeight);
  color: var(--colorPrimary);
}

h2 {
  font-size: var(--h2FontSize);
  font-weight: var(--h2FontWeight);
  color: var(--h2Color);
}

h3 {
  font-size: var(--h3FontSize);
  font-weight: var(--h3FontWeight);
}

.subtitle {
  font-weight: 900;
  font-size: x-large;
  color: #0a8f70;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: var(--h1FontSize768px);
    font-weight: var(--h1FontWeight768px);
  }

  h2 {
    font-size: var(--h2FontSize768px);
    font-weight: var(--h2FontWeight768px);
  }

  h3 {
    font-size: var(--h3FontSize768px);
    font-weight: var(--h3FontWeight768px);
  }
}

@media screen and (max-width: 1024px) {
  h1 {
    font-size: var(--h1FontSize1024px);
    font-weight: var(--h1FontWeight1024px);
  }

  h2 {
    font-size: var(--h2FontSize1024px);
    font-weight: var(--h2FontWeight1024px);
  }

  h3 {
    font-size: var(--h3FontSize1024px);
    font-weight: var(--h3FontWeight1024px);
  }
}

button,
a.redirect-btn,
.btn,
.btn-light {
  color: var(--buttonTextColor) !important;
  background: var(--buttonBG);
  border-radius: var(--buttonBorderRadius);
  border: 0px;

  &:hover {
    background: var(--buttonHovered) !important;
    color: var(--buttonTextColor) !important;
  }

  &:focus {
    background: var(--buttonClicked);
  }
}

.button-secondary {
  color: $COLOR_DARK_GREY;
  background-color: $COLOR_WHITE;
  border: 1px solid $COLOR_DARK_GREY;
  border-radius: 3px;

  &:hover {
    background-color: $COLOR_GREY;
    color: $COLOR_BLACK;
  }
}

input,
textarea {
  background: var(--inputBG);
  outline: none;
  border-left: var(--inputBorderStyleLeft);
  border-top: var(--inputBorderStyleTop);
  border-bottom: var(--inputBorderStyleBottom);
  border-right: var(--inputBorderStyleRight);
  border-radius: var(--inputBorderRadius);
}

select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: 95% 50%;
  background-repeat: no-repeat;
  vertical-align: top;
  background-image: var(--arrow-url);
  background-size: 0.6em;
  padding: 0.2em 1.5em 0.2em 0.2em;
  margin: 0.5em;
}

select {
  background-color: var(--selectBG);
  outline: none;

  border-left: var(--selectBorderStyleLeft);
  border-top: var(--selectBorderStyleTop);
  border-bottom: var(--selectBorderStyleBottom);
  border-right: var(--selectBorderStyleRight);

  border-radius: var(--selectBorderRadius);
  color: var(--selectColor);
}

.endpoint-wrapper {
  padding: 10px;

  .endpoint-segment-wrapper {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 1px;

    .endpoint-segment-item {
      height: 3vw;
      width: 17vw;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .left-item {
      background-color: #fff;
      border-left: 1px solid #979797;
      border-top: 1px solid #979797;
      border-right: 1px solid #979797;
      outline: none;
      border-bottom: 1px solid #fff;
      position: relative;
    }

    .unactive-item {
      background-color: #e6e6e6;
    }

    .play-with-data {
      background-color: #e6e6e6;
    }
  }

  .endpoint-main-content {
    color: #484848;
    background-color: #fff;
    border: 1px solid #979797;

    .endpoint-play-with-data {
      padding: 2vw;
    }

    .endpoint-documentation {
      padding: 2vw;

      p {
        line-height: 2;
      }
    }
  }
}

/* Custom checkbox */
.check-container {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  width: 60%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
}

.check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 20%;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--checkBoxBG);
}

.check-container:hover input ~ .checkmark {
  background-color: var(--checkBoxBGHovered);
}

.check-container input:checked ~ .checkmark {
  background-color: var(--checkBoxBGChecked);
}

.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

.check-container input:checked ~ .checkmark:after {
  display: block;
}

.check-container .checkmark:after {
  left: var(--checkBoxMarkLeft);
  top: var(--checkBoxMarkTop);
  width: var(--checkBoxMarkWidth);
  height: var(--checkBoxMarkHeight);
  border: solid var(--checkBoxMarkColor);
  border-width: 0 1.5px 1.5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

em {
  border: 1px solid #e8e8ea;
  padding: 0.5%;
  border-radius: 3px;
  background-color: #f8f8fc;
  font-size: 0.8rem;
  color: #e83e8c;
  word-break: break-word;
}

pre {
  padding: 1vw;
  color: #fff;
  background-color: #272822;
  white-space: pre-wrap;
  font-size: 0.8rem;
  line-height: 1.3em !important;
  margin: 0;
}

.main-wrapper {
  margin-bottom: 7.5vw;
}

strong {
  font-weight: bold;
  color: #3b4151;
}

.centeredText {
  text-align: center;
  margin-top: 2rem;
}

.spacer {
  margin-bottom: 90vw;
}

.logo {
  flex-shrink: 0;
  // max-height: 55%;
  // max-width: var(--max-width-logo);
  cursor: pointer;
  width: 80px;
}

.footer-bar {
  padding: var(--footer-padding);
  color: var(--footerFontColor);
  background-color: var(--footerBG);

  &:after {
    content: '';
    display: table;
    clear: both;
  }

  .footer-top-items {
    display: flex;
    justify-content: space-between;
    align-items: var(--align-items);
    margin-bottom: var(--margin-bottom);

    p {
      margin: 0 0;
      color: white;

      strong {
        color: inherit;
      }
    }

    :nth-child(2) {
      display: var(--display-item);
    }
  }

  .footer-item {
    width: 25%;
    color: var(--footerFontColor) !important;
    text-decoration: none;
    white-space: nowrap;
    opacity: var(--opacity-item);
    margin-left: var(--margin-left-item);

    &:hover {
      opacity: var(--opacity-item-hover) !important;
      background-color: transparent;
    }

    cursor: pointer;

    hr {
      background-color: #ffffff;
      margin: 10px 0;
    }

    p > a {
      color: inherit !important;
      display: inline-block;
      margin-bottom: 1.1em;

      &:hover {
        background-color: transparent;
      }
    }
  }
}

.social-media {
  float: right;

  a {
    text-align: center;
    margin: var(--margin-icon);
  }

  .social-media-item {
    display: inline-block;
    background-color: var(--background-color-social-icon);
  }

  p {
    display: flex;
  }

  .social-media-icon {
    cursor: pointer;
    color: var(--footerFontColor);
  }
}

@media screen and (max-width: 1080px) {
  .footer-bar {
    margin: 0 auto;
    text-align: center;

    .footer-top-items {
      flex-flow: column nowrap;
      display: block;
      margin: 0 auto;
      text-align: center;

      .logo {
        max-width: 50%;
        margin-bottom: 1.5rem;
      }

      :nth-child(2) {
        display: block !important;
        margin: 0 auto;
        text-align: center;
      }

      .footer-item {
        width: 100%;
        display: block;
        text-align: center;
        margin: 0 0 0.8em 0;
      }
    }

    .social-media {
      float: none;

      p {
        justify-content: center;
      }
      .social-icon-responsive {
        margin-top: 0.5em;
        display: flex;
        justify-content: center;
      }
    }
  }
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

.is-active .mdc-list-item__primary-text {
  font-weight: 900;
  font-size: 18pt;
  color: #0a8f70 !important;
  border: #1ab394 !important;
}

.mat-mdc-list-item,
.mat-mdc-list-base .mat-list-option {
  width: 100%;
  &:hover {
    color: rgba(0, 0, 0, 0.85);
    background-color: #d2f4ea !important;
  }
}

.mat-mdc-list-item:hover .btn-toggle {
  color: rgba(0, 0, 0, 0.85) !important;
}

.main-list-item {
  padding-left: 0!important;
}
