/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use './token-utils' as *;

@forward './token-utils';

@mixin host {
  @include container;
  
  display: #{token(display)};
  margin: auto;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

@mixin surface {
  &::before,
  &::after {
    content: '';

    @include layer-base;
  }

  &::before {
    @include hover-base;
  }

  &::after {
    @include ripple-base;
  }
}

@mixin container {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

@mixin disabled {
  display: none;
}

@mixin hovered {
  background-color: #{token(hover-color)};
  opacity: #{token(hover-opacity)};
}

@mixin pressed {
  opacity: #{token(pressed-opacity)};
  transition-duration: #{token(pressed-duration)};
}

@mixin layer-base {
  opacity: 0;
  position: absolute;
}

@mixin hover-base {
  background-color: #{token(hover-color)};
  inset: 0;
  transition: opacity #{token(hover-duration)} linear,
              background-color #{token(hover-duration)} linear;
}

@mixin ripple-base {
  background: radial-gradient(
    closest-side,
    #{token(pressed-color)} max(calc(100% - 70px), 65%),
    transparent 100%
  );
  transform-origin: center center;
  transition: opacity #{token(animation-duration)} linear;
}

///
/// Creates the styles for a visual-only state layer without the use of JavaScript.
/// 
/// This adds hover and pressed states to the element it is applied to, but does not
/// provide any "ripple" styles because that requires the use of JavaScript.
/// 
@mixin states {
  @include states-target;
  
  .forge-state-layer {
    @include tokens;

    pointer-events: none;

    &::before {
      content: '';

      @include layer-base;
    }

    &::before {
      @include hover-base;
    }
  }

  &:hover {
    .forge-state-layer::before {
      @include hovered;
    }
  }

  &:active {
    .forge-state-layer::before {
      opacity: #{token(pressed-opacity)};
    }
  }
}

@mixin states-target {
  position: relative;
  overflow: hidden;
}
