/**
 * @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-toggle-standalone,
.twnd-button-toggle-group {
  @apply bg-gray-100 dark:bg-gray-600 text-gray-900 dark:text-gray-50 relative inline-flex flex-row flex-nowrap overflow-hidden rounded-md;
}

.twnd-button-toggle-standalone.twnd-button-toggle-appearance-standard,
.twnd-button-toggle-group-appearance-standard {
  @apply rounded-md;
}

.twnd-button-toggle-vertical {
  @apply flex-col;

  .twnd-button-toggle-label-content {
    // Vertical button toggles shouldn't be an inline-block, because the toggles should
    // fill the available width in the group.
    @apply block;
  }
}

.twnd-button-toggle {
  @apply relative;

  // Fixes SVG icons that get thrown off because of the `vertical-align` on the parent.
  .twnd-icon svg {
    @apply align-top;
  }

  &.cdk-keyboard-focused {
    .twnd-button-toggle-focus-overlay {
      @apply opacity-100;
    }
  }
}

.twnd-button-toggle-appearance-standard {
  &:not(.twnd-button-toggle-disabled):hover .twnd-button-toggle-focus-overlay {
    @apply bg-opacity-5 bg-purple-500 dark:bg-purple-500;
  }

  // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
  // overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be always
  // treated as programmatic focus. Note that it needs the extra `:not` in order to have more
  // specificity than the `:hover` above.
  // TODO(paul): support `program` as well. See https://github.com/angular/components/issues/9889
  &.cdk-keyboard-focused:not(.twnd-button-toggle-disabled) .twnd-button-toggle-focus-overlay {
    @apply bg-opacity-10 bg-purple-500 dark:bg-purple-500;
  }

  // On touch devices the hover state will linger on the element after the user has tapped.
  // Disable it, because it can be confused with focus. We target the :hover state explicitly,
  // because we still want to preserve the keyboard focus state for hybrid devices that have
  // a keyboard and a touchscreen.
  @media (hover: none) {
    &:not(.twnd-button-toggle-disabled):hover .twnd-button-toggle-focus-overlay {
      @apply hidden;
    }
  }
}

.twnd-button-toggle-label-content {
  @apply inline-block text-sm px-4 relative;
}

.twnd-button-toggle-label-content > * {
  @apply align-middle;
}

// Overlay to be used as a tint.
.twnd-button-toggle-focus-overlay {
  @apply pointer-events-none opacity-50 bg-purple-500 dark:bg-purple-500;

  .twnd-button-toggle-checked & {
    @apply border-b-2 border-b-purple-500 bg-opacity-100;
  }
}

// Increase specificity because ripple styles are part of the `twnd-core` mixin and can
// potentially overwrite the absolute position of the container.
.twnd-button-toggle .twnd-button-toggle-ripple {
  // Disable pointer events for the ripple container, because the container will overlay the user
  // content and we don't want to prevent mouse clicks that should toggle the state.
  // Pointer events can be safely disabled because the ripple trigger element is the label element.
  @apply pointer-events-none bg-purple-500 dark:bg-purple-500;
}

.twnd-button-toggle-button {
  @apply text-gray-900 dark:text-gray-50 bg-gray-100 dark:bg-gray-600 cursor-pointer font-mono;

  .twnd-button-toggle-disabled & {
    @apply bg-opacity-0 cursor-default;
  }

  // Remove the extra focus outline that is added by Firefox on native buttons.
  &::-moz-focus-inner {
    @apply border-0;
  }
}