@import '../scss/_variables';
@import '../scss/_mixins';
@import '../scss/_grid';
@import '../scss/_styles';


.ekloweb-ally-tools {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  display: flex;
  padding: 20px;
  transition: opacity 0.3s;

  &.hidden {
    opacity: 0;
    pointer-events: none;
  }

  @media print {
    display: none !important;
  }
}

.ekloweb-ally-tools-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-a11y-button-text);
  fill: var(--color-a11y-button-text);
  background-color: var(--color-a11y-button-background);
  border: 2px solid var(--color-a11y-button-border);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in;

  i {
    pointer-events: none;
    display: grid;
    place-items: center;

    &.ally-btn-active-icon {
      display: none;
    }
  }

  &.active {
    i {
      &.ally-btn-default-icon {
        display: none;
      }

      &.ally-btn-active-icon {
        display: flex;
      }
    }
  }

  &[aria-checked="true"] {
    border-color: orange;
  }

  &:hover,
  &:active,
  &:focus {
    color: var(--color-a11y-button-hover-text);
    fill: var(--color-a11y-button-hover-text);
    background-color: var(--color-a11y-button-hover-background);
    border-color: var(--color-a11y-button-hover-border);
    outline: 2px solid #FFFFFF;
    filter: drop-shadow(0 0 0.75rem var(--color-a11y-button-hover-border));
    text-decoration: none;
    transform: scale(1.1);
    transition: 0.2s all;
  }
}

.ekloweb-ally-popup-container {
  &,
  * {
    box-sizing: border-box;
  }
}

.ekloweb-ally-popup {
  position: fixed;
  z-index: 9999990;
  bottom: 100px;
  right: 22px;
  display: none;
  max-height: calc(100% - 140px);
  overflow: auto;
  box-shadow: -8px 0px 15px -1px rgba(var(--color-a11y-popup-text), 0.22);

  @media (max-width: 540px) {
    width: 100%;
    right: 0;
    box-shadow: 0px 0px 15px -1px rgba(var(--color-a11y-popup-text), 0.22);
  }

  @media print {
    display: none;
  }

  &.active {
    display: block;
  }

  .ekloweb-ally-popup-content {
    padding: 30px;
    width: fit-content;
    max-width: 400px;
    border-radius: 20px;
    background-color: var(--color-a11y-popup-background);
    border: 1px solid rgba(0, 0, 0, 0.15);

    @media (max-width: 540px) {
      padding: 15px;
      margin: 60px 15px 0 15px;
      width: auto;
      max-width: none;
    }

    h1,
    h2 {
      color: var(--color-a11y-popup-text);
      margin: 0;

      &::after,
      &::before {
        display: none;
      }
    }

    h1 {
      font-size: 25px;
      margin-bottom: 25px;
    }

    h2 {
      font-size: 18px;
    }

    .link-accessibility {
      font-size: 18px;
      font-weight: 500;
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 15px;
      color: var(--color-a11y-button-text);
      background-color: var(--color-a11y-button-background);
      border: 2px solid var(--color-a11y-button-border);
      border-radius: 35px;
      text-decoration: none;
      transition: all 0.2s ease-out;

      &:hover,
      &:active,
      &:focus {
        color: var(--color-a11y-button-hover-text);
        background-color: var(--color-a11y-button-hover-background);
        border-color: var(--color-a11y-button-hover-border);
        outline: none !important;
        text-decoration: none;
      }
    }

    .ekloweb-ally-popup-options-list {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      justify-content: space-between;

      .ekloweb-ally-popup-option {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 100%;
        text-align: center;
      }

      .ekloweb-ally-popup-option-btn {
        position: relative;
        width: 100%;
        height: 150px;
        padding: 0 30px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        -webkit-appearance: none;
        cursor: pointer;
        color: var(--color-a11y-option-button-text);
        fill: var(--color-a11y-option-button-text);
        background-color: var(--color-a11y-option-button-background);
        border: 2px solid var(--color-a11y-option-button-border);
        border-radius: 15px;
        transition: all 0.15s ease;



        .ekloweb-ally-popup-option-btn-label {
          display: block;
          margin-top: 10px;
          font-size: 18px;
          font-weight: bold;
          font-family: Arial, sans-serif;
        }

        &.--contrast {
          > i,
          .ekloweb-ally-popup-option-btn-label {
            display: none;
          }

          &[data-contrast-state="0"] {
            .svg-half {
              display: inline-flex;
            }

            .contrast-label-increase {
              display: block;
            }
          }

          &[data-contrast-state="1"] {
            .svg-sun {
              display: inline-flex;
            }

            .contrast-label-light {
              display: block;
            }
          }

          &[data-contrast-state="2"] {
            .svg-moon {
              display: inline-flex;
            }

            .contrast-label-dark {
              display: block;
            }
          }

          &[data-contrast-state="3"] {
            .svg-half {
              display: inline-flex;
            }

            .contrast-label-inverse {
              display: block;
            }
          }
        }

        .ekloweb-ally-popup-option-btn-check {
          display: none;
          position: absolute;
          top: 15px;
          right: 15px;
        }

        i {
          --size : 36px;
          font-size: var(--size);
          pointer-events: none;
          display: inline-flex;
          width: var(--size);
          height: var(--size);

          svg {
            width: 100%;
            height: 100%;
            fill: inherit;

            path {
              fill: inherit;
            }
          }
        }

        .ekloweb-ally-popup-option-btn-steps {
          --ally-option-button-hover-steps-fallback: var(--color-a11y-option-button-active-steps, var(--color-a11y-option-button-border));
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
          margin-top: 10px;
          height: 10px;
          width: 100%;

          .ekloweb-ally-popup-option-btn-steps-item {
            display: block;
            flex-grow: 1;
            height: 100%;
            border-radius: 6px;
            border: solid 2px var(--color-a11y-option-button-text);
            transition: all 0.2s ease-out;
          }

          &[data-selected-item="1"],
          &[data-selected-item="2"],
          &[data-selected-item="3"] {
            > .ekloweb-ally-popup-option-btn-steps-item:nth-child(1) {
              background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-option-button-border));
            }
          }

          &[data-selected-item="2"],
          &[data-selected-item="3"] {
            > .ekloweb-ally-popup-option-btn-steps-item:nth-child(2) {
              background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-option-button-border));
            }
          }

          &[data-selected-item="3"] {
            > .ekloweb-ally-popup-option-btn-steps-item:nth-child(3) {
              background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-option-button-border));
            }
          }
        }

        &:hover,
        &:focus,
        &:active {
          .ekloweb-ally-popup-option-btn-steps {
            &[data-selected-item="1"],
            &[data-selected-item="2"],
            &[data-selected-item="3"] {
              > .ekloweb-ally-popup-option-btn-steps-item:nth-child(1) {
                background-color: var(--color-a11y-option-button-hover-steps, var(--ally-option-button-hover-steps-fallback));
              }
            }
  
            &[data-selected-item="2"],
            &[data-selected-item="3"] {
              > .ekloweb-ally-popup-option-btn-steps-item:nth-child(2) {
                background-color: var(--color-a11y-option-button-hover-steps, var(--ally-option-button-hover-steps-fallback));
              }
            }
  
            &[data-selected-item="3"] {
              > .ekloweb-ally-popup-option-btn-steps-item:nth-child(3) {
                background-color: var(--color-a11y-option-button-hover-steps, var(--ally-option-button-hover-steps-fallback));
              }
            }

            .ekloweb-ally-popup-option-btn-steps-item {
              border: solid 2px var(--color-a11y-option-button-hover-text);
            }
          }

        }

        &[aria-checked="true"] {
          border: 2px solid var(--color-a11y-option-button-hover-border);

          .ekloweb-ally-popup-option-btn-check {
            display: inline-flex;
          }
        }



        &:hover,
        &:active,
        &:focus {
          cursor: pointer;
          color: var(--color-a11y-option-button-hover-text);
          fill: var(--color-a11y-option-button-hover-text);
          background-color: var(--color-a11y-option-button-hover-background);
          border-color: var(--color-a11y-option-button-hover-border);
          outline: none !important;
          text-decoration: none;
        }
      }
    }
  }
}

/* Contrast-aware selected step indicators */
html.contrast-element:not(.inverse-element):not(.custom-contrast-color) {
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="1"],
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="2"],
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
    > .ekloweb-ally-popup-option-btn-steps-item:nth-child(1) {
      background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-font)) !important;
    }
  }

  .ekloweb-ally-popup-option-btn-steps[data-selected-item="2"],
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
    > .ekloweb-ally-popup-option-btn-steps-item:nth-child(2) {
      background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-font)) !important;
    }
  }

  .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
    > .ekloweb-ally-popup-option-btn-steps-item:nth-child(3) {
      background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-font)) !important;
    }
  }
}

html.contrast-element.inverse-element:not(.custom-contrast-color) {
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="1"],
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="2"],
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
    > .ekloweb-ally-popup-option-btn-steps-item:nth-child(1) {
      background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-background)) !important;
    }
  }

  .ekloweb-ally-popup-option-btn-steps[data-selected-item="2"],
  .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
    > .ekloweb-ally-popup-option-btn-steps-item:nth-child(2) {
      background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-background)) !important;
    }
  }

  .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
    > .ekloweb-ally-popup-option-btn-steps-item:nth-child(3) {
      background-color: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-background)) !important;
    }
  }
}

/* Hover color for selected contrast steps */
html.contrast-element:not(.inverse-element):not(.custom-contrast-color) .ekloweb-ally-popup-option-btn-steps {
  --ally-option-button-hover-steps-fallback: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-font));
}

html.contrast-element.inverse-element:not(.custom-contrast-color) .ekloweb-ally-popup-option-btn-steps {
  --ally-option-button-hover-steps-fallback: var(--color-a11y-option-button-active-steps, var(--color-a11y-contrast-background));
}

.ekloweb-ally-popup-option-btn.--contrast {
  &:hover,
  &:focus,
  &:active {
    .ekloweb-ally-popup-option-btn-steps[data-selected-item="1"],
    .ekloweb-ally-popup-option-btn-steps[data-selected-item="2"],
    .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
      > .ekloweb-ally-popup-option-btn-steps-item:nth-child(1) {
        background-color: var(--color-a11y-option-button-hover-steps, var(--ally-option-button-hover-steps-fallback)) !important;
      }
    }

    .ekloweb-ally-popup-option-btn-steps[data-selected-item="2"],
    .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
      > .ekloweb-ally-popup-option-btn-steps-item:nth-child(2) {
        background-color: var(--color-a11y-option-button-hover-steps, var(--ally-option-button-hover-steps-fallback)) !important;
      }
    }

    .ekloweb-ally-popup-option-btn-steps[data-selected-item="3"] {
      > .ekloweb-ally-popup-option-btn-steps-item:nth-child(3) {
        background-color: var(--color-a11y-option-button-hover-steps, var(--ally-option-button-hover-steps-fallback)) !important;
      }
    }
  }
}

@media print {
  .inverse-element {
    filter: none !important;
  }
}

html[class*="fontsize"] {
  &.fontsize-50 {
    font-size: 50%;
  }

  &.fontsize-100 {
    font-size: 100%;
  }

  &.fontsize-150 {
    font-size: 150%;
  }

  &.fontsize-200 {
    font-size: 200%;
  }

  &.fontsize-250 {
    font-size: 250%;
  }

  &.fontsize-300 {
    font-size: 300%;
  }

  .container {
    width: 100%;
    max-width: none;
  }

  [class*="col-"] {
    float: none;
    flex: initial;
    width: 100%;
    max-width: none;
  }

  .col {
    flex: initial;
  }

  @media screen and (max-width: 1090px) {
    * {
      word-break: break-word !important;
    }
  }

  @media screen and (max-width: 800px) {
    * {
      word-break: break-all !important;
    }
  }
}

/**
@todo find a way to easily disable all animation...
 */
html.animation-disabled {
  *,
  *::after,
  *::before {
    transition: none !important;
    animation: none !important;
  }
}

.animation-disabled {
  /*
  * {
    animation-play-state: paused !important;
    animation-fill-mode: forwards !important;
    transition: none !important;
  }

  .scroll-visible {
    animation: none !important;
  }
  */
}

.no-transition {
  * {
    transition: none !important;
  }
}

/*# sourceMappingURL=style.css.map */