@import '../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';

@import 'true';
@import '../src/utilityMixins/anchor-roleTab';

@include describe('auro_anchorTab()') {
  @include it('should return a populated selector based on (sass, noncomponent)') {
    @include assert {
      @include output {
        .auro_roleTab {
          @include auro_anchorTab(sass, noncomponent);
        }
      }

      @include expect {
        .auro_roleTab {
          padding: 1rem;

          color: #0074cb;
          border-width: 0 0 1px;
          border-style: solid;
          border-color: #626b79;
        }

        .auro_roleTab:not(.is-touching):hover {
          cursor: pointer;
          text-decoration: none;

          color: #054687;
          border-width: 0 0 2px;
          border-color: currentColor;
        }

        .auro_roleTab.is-active {
          cursor: pointer;
          text-decoration: none;

          color: #222222;
          border-width: 0 0 2px;
          border-color: currentColor;
        }
      }
    }
  }

  @include it('should return a populated selector based on (sass, component)') {
    @include assert {
      @include output($selector: false) {
        .hyperlink--tab {
          @include auro_anchorTab(sass, component);
        }
      }

      @include expect($selector: false) {
        .hyperlink--tab {
          padding: 1rem;

          color: #0074cb;
          border-width: 0 0 1px;
          border-style: solid;
          border-color: #626b79;;
        }

        :host(:not(.is-touching)) .hyperlink--tab:hover {
          cursor: pointer;
          text-decoration: none;

          color: #054687;
          border-width: 0 0 2px;
          border-color: currentColor;
        }

        .hyperlink--tab.is-active {
          cursor: pointer;
          text-decoration: none;

          color: #222222;
          border-width: 0 0 2px;
          border-color: currentColor;
        }
      }
    }
  }

  @include it('should return a populated selector based on (scss, noncomponent)') {
    @include assert {
      @include output {
        .auro_roleTab {
          @include auro_anchorTab(scss, noncomponent);
        }
      }

      @include expect {
        .auro_roleTab {
          padding: 1rem;

          color: #0074cb;
          border-width: 0 0 1px;
          border-style: solid;
          border-color: #626b79;;
        }

        .auro_roleTab:not(.is-touching):hover {
          cursor: pointer;
          text-decoration: none;

          color: #054687;
          border-width: 0 0 2px;
          border-color: currentColor;
        }

        .auro_roleTab.is-active {
          cursor: pointer;
          text-decoration: none;

          color: #222222;
          border-width: 0 0 2px;
          border-color: currentColor;
        }
      }
    }
  }

  @include it('should return a populated selector based on (scss, component)') {
    @include assert {
      @include output($selector: false) {
        .hyperlink--tab {
          @include auro_anchorTab(scss, component);
        }
      }

      @include expect($selector: false) {
        .hyperlink--tab {
          padding: 1rem;

          color: #0074cb;
          border-width: 0 0 1px;
          border-style: solid;
          border-color: #626b79;;
        }

        :host(:not(.is-touching)) .hyperlink--tab:hover {
          cursor: pointer;
          text-decoration: none;

          color: #054687;
          border-width: 0 0 2px;
          border-color: currentColor;
        }

        .hyperlink--tab.is-active {
          cursor: pointer;
          text-decoration: none;

          color: #222222;
          border-width: 0 0 2px;
          border-color: currentColor;
        }
      }
    }
  }

  @include it('should return a populated selector based on (css, noncomponent)') {
    @include assert {
      @include output {
        .auro_roleTab {
          @include auro_anchorTab(css, noncomponent);
        }
      }

      @include expect {
        .auro_roleTab {
          padding: 1rem;

          color: var(--auro-color-text-link-on-light);
          border-width: 0 0 1px;
          border-style: solid;
          border-color: var(--auro-color-border-primary-on-light);
        }

        .auro_roleTab:not(.is-touching):hover {
          cursor: pointer;
          text-decoration: none;

          color: var(--auro-color-text-link-on-light-hover);
          border-width: 0 0 2px;
          border-color: currentColor;
        }

        .auro_roleTab.is-active {
          cursor: pointer;
          text-decoration: none;

          color: var(--auro-color-text-primary-on-light);
          border-width: 0 0 2px;
          border-color: currentColor;
        }
      }
    }
  }

  @include it('should return a populated selector based on (css, component)') {
    @include assert {
      @include output($selector: false) {
        .hyperlink--tab {
          @include auro_anchorTab(css, component);
        }
      }

      @include expect($selector: false) {
        .hyperlink--tab {
          padding: 1rem;

          color: var(--auro-color-text-link-on-light);
          border-width: 0 0 1px;
          border-style: solid;
          border-color: var(--auro-color-border-primary-on-light);
        }

        :host(:not(.is-touching)) .hyperlink--tab:hover {
          cursor: pointer;
          text-decoration: none;

          color: var(--auro-color-text-link-on-light-hover);
          border-width: 0 0 2px;
          border-color: currentColor;
        }

        .hyperlink--tab.is-active {
          cursor: pointer;
          text-decoration: none;

          color: var(--auro-color-text-primary-on-light);
          border-width: 0 0 2px;
          border-color: currentColor;
        }
      }
    }
  }
}