$spacing: 1rem;
$border-radius: 4px;
$border-width: 1px;

@use "00-base/configure" as *;

@use "sass:color" as *;

.ma_help-tip__label-a11y {
  display: none;
}

.ma__help-tip {
  $helpTipBaseClass: &;

  display: inline;
  margin-bottom: .5rem;

  &__container {
    position: relative;
    background-color: var(--mf-c-primary-lightest);
    margin-top: .5rem;

    &.collapsing, &.expanding {
        position: relative;
        overflow: hidden;
        visibility: visible;
        -webkit-transition-property: height, visibility;
        transition-property: height, visibility;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-timing-function: ease;
        transition-timing-function: ease;
    }

    &.collapsed {
        display: none;
        height: 0px;
    }

    &.expanded {
       height: auto;
       visibility: visible;
       display: block;
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
  }

  &__trigger {

    display: inline;
    cursor: pointer;
    border: none;
    padding: 0px 2px;
    border-bottom: 2px dotted var(--mf-c-primary);
    background-color: var(--mf-c-bay-blue-lightest);
    font-weight: $fonts-bold;


    svg {
      margin-left: 5px;
      margin-bottom: -.1em;
      width: 1em;
      height: 1em;
      fill: var(--mf-c-font-link);
    }

    &:focus {
      box-shadow: 0 0 3px 3px var(--mf-c-focus);
      outline: 0;
    }

    &--active, &:hover {
      background-color: var(--mf-c-primary);
      color: var(--mf-c-font-inverse);

      svg {
        fill: mix($c-white, $c-font-link, 70%);
      }
    }

    &--disabled {
      pointer-events: none;
    }
  }

  &__text {
    overflow-y: scroll; // overflow scroll MUCH smoother on mobile safari
    -webkit-overflow-scrolling: touch;

    @media ($bp-small-min) {
      overflow-y: auto;
    }

    .ma__help-tip__text--direct {
      padding: $spacing ($spacing * 2);
    }

  }

  &__text--children {
    overflow-y: scroll; // overflow scroll MUCH smoother on mobile safari
    -webkit-overflow-scrolling: touch;

    @media ($bp-small-min) {
      overflow-y: auto;
    }

    .ma__help-tip__text--direct {
      padding: $spacing $spacing;
    }

  }

  &__close-mobile {
    display: none;
    border-radius: 0;
    z-index: 1;

    svg {
      background-color: transparent;
      cursor: pointer;
      margin-left: 5px;
      width: 1rem;
      height: 1rem;
      fill: var(--mf-c-white);
    }
  }

  &__close-desktop {
    display: block;
    position: absolute;
    top: -3px;
    right: 0;
    padding: 0px 10px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    z-index: 1;

   svg {
      width: .75rem;
      height: .75rem;
   }

    &:focus {
      outline: 0;
      box-shadow: focus-shadow($border-width, $c-focus);
    }
  }

  #{$helpTipBaseClass}__container {

    &--c-primary {
      background-color: var(--mf-c-primary-lightest);
      #{$helpTipBaseClass}__close-desktop {

        svg {
          fill: var(--mf-c-primary);
        }
      }
    }

    &--c-primary-alt {
      background-color: var(--mf-c-primary-alt-lightest);
      #{$helpTipBaseClass}__close-desktop {

        svg {
          fill: var(--mf-c-primary-alt);
        }
      }
    }

    &--c-highlight {
      background-color: var(--mf-c-highlight-lightest);
      #{$helpTipBaseClass}__close-desktop {

        svg {
          fill: var(--mf-c-gray-dark);
        }
      }
    }

    &--c-gray-dark {
      background-color: var(--mf-c-gray-lightest);
      #{$helpTipBaseClass}__close-desktop {

        svg {
          fill: var(--mf-c-gray-dark);
        }
      }
    }

     &--c-error-red {
      background-color: var(--mf-c-error-red-lightest);
      #{$helpTipBaseClass}__close-desktop {

        svg {
          fill: var(--mf-c-error-red);
        }
      }
    }

    &--c-white {
      background-color: var(--mf-c-bg);//<-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white?
      #{$helpTipBaseClass}__close-desktop {
        fill: var(--mf-c-gray-dark);
      }
    }
  }

  &.mobile-tray {
    #{$helpTipBaseClass}__container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10; // to create a new stacking context on top, stack below mobile site header (z-index: 90)
      margin-top: .5rem;

      @media ($bp-small-max) {

        &.expanded {
          animation-name: slideup;
          animation-duration: 0.25s;
        }
      }

      &--c-primary {
        background-color: var(--mf-c-primary-lightest);
        #{$helpTipBaseClass}__close-mobile {
          background-color: var(--mf-c-primary);
        }
      }

      &--c-primary-alt {
        background-color: var(--mf-c-primary-alt-lightest);
        #{$helpTipBaseClass}__close-mobile {
          background-color: var(--mf-c-primary-alt);
        }
      }

      &--c-highlight {
        background-color: var(--mf-c-highlight-lightest);
        #{$helpTipBaseClass}__close-mobile {
          background-color: var(--mf-c-highlight);
        }
      }

      &--c-gray-dark {
        background-color: var(--mf-c-gray-lightest);
        #{$helpTipBaseClass}__close-mobile {
          background-color: var(--mf-c-gray-dark);
        }
      }

      &--c-error-red {
        background-color: var(--mf-c-error-red-lightest);
        #{$helpTipBaseClass}__close-mobile {
          background-color: var(--mf-c-error-red);
        }
      }

      &--c-white {
        background-color: var(--mf-c-bg);// <-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white?
        #{$helpTipBaseClass}__close-mobile {
          background-color: var(--mf-c-gray-dark);
        }
      }
    }
    #{$helpTipBaseClass}__text {

      .ma__help-tip__text-direct {
        padding: 10px 5px;
        margin: 0px;
        font-size: $fonts-medium;
        line-height: 1.1;
        color: var(--mf-c-font-base);
      }
    }
    #{$helpTipBaseClass}__text, #{$helpTipBaseClass}__text--children {
      margin-bottom: 3rem;
    }

    #{$helpTipBaseClass}__text--children {

      .ma__help-tip__text--direct {
        padding-top: 0px;
        padding-bottom: 0px;
      }
    }

    #{$helpTipBaseClass}__close-mobile {
      display: block;
    }

    #{$helpTipBaseClass}__close-desktop {
      display: none;
    }

    @media ($bp-small-min) {
      #{$helpTipBaseClass}__container {
        position: relative;
        bottom: auto;

        &--c-primary {
          background-color: var(--mf-c-primary-lightest);
        }

        &--c-primary-alt {
          background-color: var(--mf-c-primary-alt-lightest);
        }

        &--c-highlight {
          background-color: var(--mf-c-highlight-lightest);
        }

        &--c-gray-dark {
          background-color: var(--mf-c-gray-lightest);
        }

        &--c-error-red {
          background-color: var(--mf-c-error-red-lightest);
        }

        &--c-white {
          background-color: var(--mf-c-bg);//<-- BASED ON THE CLASS, IS IT BETTER TO KEEP $c-white?
        }
      }

      #{$helpTipBaseClass}__close-mobile {
        display: none;
      }

      #{$helpTipBaseClass}__close-desktop {
        display: block;
      }

      #{$helpTipBaseClass}__text, #{$helpTipBaseClass}__text--children {
        height: auto;
        margin-bottom: 0;

        #{$helpTipBaseClass}__text-direct {
          padding: 10px 5px;
          margin: 0px;
        }

      }
    }
  }
}


@keyframes slideup {

  from {
    bottom: -100vh;
  }

  to {
    bottom: 0;
  }
}