@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/variables';

.page-policy {
  &__container {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;

    @include breakpoint-down('deskL') {
      max-width: 734px;
    }

    @include breakpoint-down('deskS') {
      max-width: 100%;
      padding: 0 40px;
    }

    @include breakpoint-down('tabM') {
      padding: 0 20px;
    }
  }

  &__block {
    margin-bottom: 64px;

    @include breakpoint-down('tabM') {
      margin-bottom: 32px;
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  h1 {
    @include titleL;

    margin-bottom: 40px;
    text-transform: uppercase;

    @include breakpoint-down('tabM') {
      margin-bottom: 24px;
    }
  }

  h2 {
    @include titleM;

    margin-bottom: 16px;

    @include breakpoint-down('tabM') {
      margin-bottom: 8px;
    }
  }

  h3 {
    @include baseTitle;

    margin-bottom: 16px;

    @include breakpoint-down('tabM') {
      margin-bottom: 8px;
    }
  }

  p {
    @include smallDefault;

    margin-bottom: 16px;

    @include breakpoint-down('tabM') {
      margin-bottom: 8px;
    }
  }

  ul {
    @include smallDefault;

    margin-bottom: 16px;
    list-style: disc;
    padding-left: 22px;

    @include breakpoint-down('tabM') {
      margin-bottom: 8px;
      padding-left: 16px;
    }

    li {
      margin-bottom: 8px;

      > ol {
        padding-left: 18px;

        @include breakpoint-down('tabM') {
          padding-left: 14px;
        }
      }
    }
  }

  ol {
    @include smallDefault;

    margin-bottom: 16px;
    padding-left: 18px;

    @include breakpoint-down('tabM') {
      margin-bottom: 8px;
      padding-left: 14px;
    }

    li {
      margin-bottom: 8px;
    }
  }

  a {
    position: relative;
    display: inline;

    color: $linkPrimary;
    text-decoration: underline;

    &:visited,
    &:link {
      color: $linkPrimary;
    }
  }

  &__table {
    @include breakpoint-down('tabM') {
      width: calc(100% + 40px);
      padding: 0 20px;
      overflow: auto;
      margin-left: -20px;
    }

    &::-webkit-scrollbar {
      width: 0;
      opacity: 0;
      display: none;
    }
  }

  table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 24px;

    @include breakpoint-down('tabM') {
      width: max-content;
    }

    @include breakpoint-down('tabM') {
      margin-bottom: 16px;
    }
  }

  tbody {
    display: block;
    padding: 24px 0 24px;

    @include breakpoint-down('tabM') {
      padding: 16px 0;
    }
  }

  tr {
    @include smallDefault;

    border-bottom: 16px solid $techWhite;

    @include breakpoint-down('tabM') {
      border-bottom: 8px solid $techWhite;
    }

    &:nth-child(2n + 1) {
      background-color: transparent;
    }

    &:nth-child(2n + 0) {
      background-color: $techBlue2;
    }
  }

  td {
    border: none;
    vertical-align: top;
    padding: 16px 24px 16px 24px;

    @include breakpoint-down('tabM') {
      padding: 10px 16px;
    }
  }

  &__tableCookie {
    tr {
      &:first-of-type {
        @include smallCTA;
      }

      &:not(&:first-of-type) {
        @include smallDefault;
      }
    }

    td {
      &:nth-child(1) {
        width: 16%;

        @include breakpoint-down('deskL') {
          width: 20%;
        }

        @include breakpoint-down('tabM') {
          width: auto;
        }
      }

      &:nth-child(2) {
        width: 20%;

        @include breakpoint-down('deskL') {
          width: 23%;
        }

        @include breakpoint-down('tabM') {
          width: auto;
        }
      }

      &:nth-child(3) {
        width: 64%;

        @include breakpoint-down('deskL') {
          width: 57%;
        }

        @include breakpoint-down('tabM') {
          width: auto;
          max-width: 454px;
        }
      }
    }
  }

  &__tablePrivacyOne {
    td {
      &:nth-child(1) {
        width: 24%;

        @include breakpoint-down('deskL') {
          width: 27%;
        }

        @include breakpoint-down('tabM') {
          width: 24%;
        }
      }

      &:nth-child(2) {
        width: 76%;

        @include breakpoint-down('deskL') {
          width: 77%;
        }

        @include breakpoint-down('tabM') {
          width: auto;
          max-width: 454px;
        }
      }
    }
  }

  &__tablePrivacyTwo {
    td {
      &:nth-child(1) {
        width: 25%;

        @include breakpoint-down('tabM') {
          width: 24%;
        }
      }

      &:nth-child(2) {
        width: 75%;

        @include breakpoint-down('tabM') {
          width: auto;
          max-width: 454px;
        }
      }
    }

    &--mobile {
      @include breakpoint-down('tabM') {
        table {
          width: max-content;
          min-width: 600px;
          table-layout: fixed;
        }

        td {
          &:nth-child(1) {
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            text-align: center;
          }

          &:nth-child(2) {
            width: 200px;
            min-width: 200px;
            max-width: 200px;
            word-wrap: break-word;
            overflow-wrap: break-word;
          }

          &:nth-child(3) {
            width: 150px;
            min-width: 150px;
            max-width: 150px;
            word-wrap: break-word;
            overflow-wrap: break-word;
          }

          &:nth-child(4) {
            width: 300px;
            min-width: 300px;
            max-width: 300px;
            word-wrap: break-word;
            overflow-wrap: break-word;
          }
        }

        th {
          &:nth-child(1) {
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            text-align: center;
          }

          &:nth-child(2) {
            width: 200px;
            min-width: 200px;
            max-width: 200px;
          }

          &:nth-child(3) {
            width: 150px;
            min-width: 150px;
            max-width: 150px;
          }

          &:nth-child(4) {
            width: 300px;
            min-width: 300px;
            max-width: 300px;
          }
        }
      }
    }
  }

  &__tableVul {
    td {
      &:nth-child(1) {
        width: 50%;

        @include breakpoint-down('tabM') {
          width: 24%;
        }
      }

      &:nth-child(2) {
        width: 50%;

        @include breakpoint-down('tabM') {
          width: auto;
          max-width: 454px;
        }
      }
    }
  }
}