/**
 * @license
 * FOURBURNER CONFIDENTIAL
 * Unpublished Copyright (C) 2021 FourBurner Technologies, Inc. All Rights Reserved.
 *
 * NOTICE: All information contained herein is, and remains the property of FOURBURNER TECHNOLOGIES, INC.
 * The intellectual and technical concepts contained herein are proprietary to FOURBURNER TECHNOLOGIES, INC.
 * and may be covered by U.S. and Foreign Patents, patents in process, and are protected by trade secret
 * or copyright law. Dissemination of this information or reproduction of this material is strictly forbidden
 * unless prior written permission is obtained from FOURBURNER TECHNOLOGIES, INC. Access to the source code
 * contained herein is hereby forbidden to anyone except current FOURBURNER TECHNOLOGIES, INC. employees,
 * managers or contractors who have executed Confidentiality and Non-disclosure agreements explicitly
 * covering such access.
 *
 * The copyright notice above does not evidence any actual or intended publication or disclosure of
 * this source code, which includes information that is confidential and/or proprietary, and is a
 * trade secret, of FOURBURNER TECHNOLOGIES, INC. ANY REPRODUCTION, MODIFICATION, DISTRIBUTION, PUBLIC
 * PERFORMANCE, OR PUBLIC DISPLAY OF OR THROUGH USE OF THIS SOURCE CODE WITHOUT THE EXPRESS WRITTEN
 * CONSENT OF FOURBURNER TECHNOLOGIES, INC. IS STRICTLY PROHIBITED, AND IN VIOLATION OF APPLICABLE 
 * LAWS AND INTERNATIONAL TREATIES. THE RECEIPT OR POSSESSION OF THIS SOURCE CODE AND/OR RELATED
 * INFORMATION DOES NOT CONVEY OR IMPLY ANY RIGHTS TO REPRODUCE, DISCLOSE OR DISTRIBUTE ITS CONTENTS,
 * OR TO MANUFACTURE, USE, OR SELL ANYTHING THAT IT MAY DESCRIBE, IN WHOLE OR IN PART.
 */

.twnd-button, .twnd-icon-button {
  .twnd-button-focus-overlay {
    @apply opacity-0;
  }
}

// Only basic and stroked buttons (not raised, FABs or icon buttons) have a hover style.
// Use the same visual treatment for hover as for focus.
.twnd-button,
.twnd-stroked-button {
  &:hover:not(.twnd-button-disabled) .twnd-button-focus-overlay {
    @apply opacity-5;
  }
}

// Disable the hover styles on non-hover devices. Since this is more of a progressive
// enhancement and not all desktop browsers support this kind of media query, we can't
// use something like `@media (hover)`.
@media (hover: none) {
  .twnd-button,
  .twnd-stroked-button {
    &:hover:not(.twnd-button-disabled) .twnd-button-focus-overlay {
      @apply opacity-0;
    }
  }
}

// Should be placed after the `:hover` styles so the focused
// styling coming in from `twnd-button-base` takes precedence.
.twnd-button, .twnd-icon-button, .twnd-stroked-button, .twnd-flat-button {
  @apply bg-purple-500 hover:bg-purple-600 border-b-4 border-b-purple-700 dark:border-b-purple-700 text-gray-50 font-body font-semibold text-sm rounded-md overflow-hidden;
}

.twnd-raised-button {
  @apply bg-purple-500 hover:bg-purple-600 border-b-4 border-b-purple-700 dark:border-b-purple-700 rounded-md px-4 py-2 text-gray-50 font-body font-semibold text-sm overflow-hidden;
}

.twnd-stroked-button {
  @apply bg-gray-50 hover:bg-gray-200 border-b-4 border-b-gray-400 dark:border-b-gray-400 text-gray-900 font-body font-semibold text-sm rounded-md overflow-hidden;

  // Since the stroked button has has an actual border that reduces the available space for
  // child elements such as the ripple container or focus overlay, an inherited border radius
  // for the absolute-positioned child elements does not work properly. This is because the
  // child element cannot expand to the same boundaries as the parent element with a border.
  // In order to work around this issue by *not* hiding overflow, we adjust the child elements
  // to fully cover the actual button element. This means that the border-radius would be correct
  // then. See: https://github.com/angular/components/issues/13738
  .twnd-button-ripple.twnd-ripple, .twnd-button-focus-overlay {
    @apply top-4 left-4 right-4 bottom-4;
  }
}

.twnd-icon-button {
  @apply p-0 min-w-0 w-24 h-12 flex-shrink-0 text-sm rounded-md;

  i, .twnd-icon {
    @apply text-sm;
  }
}

// The ripple container and focus overlay should match the bounds of the entire button.
// Increase specificity for the ripple container because ripple styles are part of
// the `twnd-core` mixin and can potentially overwrite the absolute position of the container.
.twnd-button-ripple.twnd-ripple,
.twnd-button-focus-overlay {
  @apply bg-purple-400 pointer-events-none border-inherit;
}

// Fixes the ripples not clipping to the border radius on Safari. Uses `:not(:empty)`
// in order to avoid creating extra layers when there aren't any ripples.
.twnd-button-ripple.twnd-ripple:not(:empty) {
  @apply transform translate-x-0;
}

// Element that overlays the button to show focus and hover effects.
.twnd-button-focus-overlay {
  @apply opacity-0 transition-all;

  ._twnd-animation-noopable & {
    @apply transition-none;
  }
}

// For round buttons, the ripple container should clip child ripples to a circle.
.twnd-button-ripple-round {
  @apply border-4 rounded-md z-10;
}

// Elements inside of all type of buttons should be vertical aligned in the middle.
.twnd-button, .twnd-flat-button, .twnd-stroked-button, .twnd-raised-button, .twnd-icon-button,
.twnd-fab, .twnd-mini-fab {
  .twnd-button-wrapper > * {
    @apply align-middle;
  }
}

// Align icon-buttons correctly inside of standard, fill, and outline form-field appearances.
.twnd-form-field:not(.twnd-form-field-appearance-legacy) {
  .twnd-form-field-prefix,
  .twnd-form-field-suffix {
    .twnd-icon-button {
      @apply inline-flex justify-center items-center text-inherit w-10 h-10;
    }
  }
}