@mixin a11y-on-focus-corporate-borders($yellow-offset: -4px, $black-offset: -6px) {
  &:focus-visible {
    position: relative;
    &::before{
      background: transparent;
      content: "";
      position: absolute;
      border-radius: 2px;
      top: $yellow-offset;
      left: $yellow-offset;
      right: $yellow-offset;
      bottom: $yellow-offset;
      border: 2px solid #fff599;
    }
    &::after{
      background: transparent;
      content: "";
      position: absolute;
      border-radius: 4px;
      top: $black-offset;
      left: $black-offset;
      right: $black-offset;
      bottom: $black-offset;
      border: 2px solid #000;
    }
  }
}

@mixin a11y-on-focus-retail-borders($yellow-offset: -4px, $black-offset: -6px) {
  &:focus-visible {
    position: relative;
    &::before{
      background: transparent;
      content: "";
      position: absolute;
      border-radius: 2px;
      top: $yellow-offset;
      left: $yellow-offset;
      right: $yellow-offset;
      bottom: $yellow-offset;
      border: 2px solid #FCEE50;
    }
    &::after{
      background: transparent;
      content: "";
      position: absolute;
      border-radius: 4px;
      top: $black-offset;
      left: $black-offset;
      right: $black-offset;
      bottom: $black-offset;
      border: 2px solid #000;
    }
  }
}


:host(.isp-corporate-mode-a11y-wrapper) {
  .isp-tab-toggle {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.875rem;
    max-width: none;

    .tabs-container {
      border-collapse: separate;
      margin-bottom: 20px;

      .tab-element {
        vertical-align: middle;
        font-size: 0.5625rem;
        font-weight: bold;
        height: 2.25rem;
        width: auto;
        min-width: 5rem;
        max-width: 13.75rem;
        padding: 10px 20px 10px 20px;
        border-width: 1px;
        border-style: solid;

        &:focus-visible {
          &:not(.disabled) {
            @include a11y-on-focus-corporate-borders;
          }

          &.disabled {
            pointer-events: none;
            cursor: default;
            opacity: 0.35;

            .tab-title {
              pointer-events: none;
              cursor: default;
            }

          }


        }

        &:not(.first).active {
          &.inner+:not(.active) {
            //border-left-color:transparent;
            border-left: none;
            padding-left: 21px;

            .tab-title {}

          }
        }

        &:not(.last):not(.active) {
          //border-right-color:transparent;
          border-right: none;
          padding-right: 21px;

          .tab-title {}
        }

        &.first.active {
          &+.last:not(.active) {
            //border-left-color:transparent;
            border-left: none;
            padding-left: 21px;

            .tab-title {}
          }
        }

        &:first-child {
          border-radius: 2px 0 0 2px;
        }

        &:last-child {
          border-radius: 0 2px 2px 0;
        }

        i {
          font-size: 1rem;
        }

        .tab-title {
          display: flex;
          align-items: center;
          text-transform: none;
          height: 0.875rem;
          width: auto;
          min-width: 2.5rem;
          max-width: 11.125rem;
          font-weight: normal;
          line-height: 0.875rem;

          &.active-title {
            font-weight: bold;
          }

          span {
            font-size: 0.75rem;

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

          .text-truncate-multiline {
            text-transform: none;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-shadow: none;
            font-size: 0.75rem;
          }
        }

      }
      @include a11y-on-focus-corporate-borders();
      &:focus-visible {
        position: relative;
        z-index: 31;
      }
    }

    &.active {
      box-shadow: none;
    }

  }
}


.isp-tab-toggle {
  display: table;
  max-width: 59.6875rem;

  .tabs-container {
    border-collapse: collapse;
    margin-bottom: 20px;
    
    .tab-element {
      display: table-cell;
      height: 3.125em;
      width: auto;
      max-width: 15rem;
      min-width: 14.375rem;
      text-align: center;
      border-width: 0.0625rem;
      border-style: solid;
      vertical-align: middle;
      padding: 0px 19px;
      cursor: pointer;
      
      &.disabled {
        cursor: not-allowed;
        opacity: 0.35;
      }
      i {
        display: block;
        font-size: 1.5rem;
      }
      .tab-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-weight: 600;
        margin: auto;
        vertical-align: middle;
        line-height: 0.875rem;

        span {
          font-size: 0.75em;
          width: max-content;

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

        .text-truncate-multiline {
          text-transform: none;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-shadow: none;
          font-size: 0.75rem;
        }

        .text-truncate-multiline {
          text-transform: none;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-shadow: none;
          font-size: 0.75rem;
        }
      }

        &:focus-visible {
          &:not(.disabled) {
            @include a11y-on-focus-retail-borders;
          }
        }
    }

  }
}
.centre {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
