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

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

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

      @include expect {
        .auro_roleButton {
          display: inline-block;

          padding: 0 1rem;

          text-decoration: none;

          color: #0074cb;
          border: 1px solid transparent;

          line-height: 3;
        }

        @media (hover: hover) {
          .auro_roleButton:hover {
            cursor: pointer;
            text-decoration: underline;

            color: #054687;
          }
        }
      }
    }
  }

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

      @include expect($selector: false) {
        .auro_roleButton {
          display: inline-block;

          padding: 0 1rem;

          text-decoration: none;

          color: #0074cb;
          border: 1px solid transparent;

          line-height: 3;
        }

        :host(:not(.is-touching)) .auro_roleButton:hover {
          cursor: pointer;
          text-decoration: underline;

          color: #054687;
        }
      }
    }
  }

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

      @include expect {
        .auro_roleButton {
          display: inline-block;

          padding: 0 1rem;

          text-decoration: none;

          color: #0074cb;
          border: 1px solid transparent;

          line-height: 3;
        }

        @media (hover: hover) {
          .auro_roleButton:hover {
            cursor: pointer;
            text-decoration: underline;

            color: #054687;
          }
        }
      }
    }
  }

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

      @include expect($selector: false) {
        .auro_roleButton {
          display: inline-block;

          padding: 0 1rem;

          text-decoration: none;

          color: #0074cb;
          border: 1px solid transparent;

          line-height: 3;
        }

        :host(:not(.is-touching)) .auro_roleButton:hover {
          cursor: pointer;
          text-decoration: underline;

          color: #054687;
        }
      }
    }
  }

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

      @include expect {
        .auro_roleButton {
          display: inline-block;

          padding: 0 var(--auro-size-md);

          text-decoration: none;

          color: var(--auro-color-text-link-on-light);
          border: 1px solid transparent;

          line-height: var(--auro-unitless-scale-300);
        }

        @media (hover: hover) {
          .auro_roleButton:hover {
            cursor: pointer;
            text-decoration: underline;

            color: var(--auro-color-ui-hover-on-light);
          }
        }
      }
    }
  }

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

      @include expect($selector: false) {
        .auro_roleButton {
          display: inline-block;

          padding: 0 var(--auro-size-md);

          text-decoration: none;

          color: var(--auro-color-text-link-on-light);
          border: 1px solid transparent;

          line-height: var(--auro-unitless-scale-300);
        }

        :host(:not(.is-touching)) .auro_roleButton:hover {
          cursor: pointer;
          text-decoration: underline;

          color: var(--auro-color-ui-hover-on-light);
        }
      }
    }
  }
}