@use '@angular/material' as mat;
@import "./sc-mixins";
@import "./sc-variables";


.btn {
    &-inline {
      margin: 2px 0 !important;
      padding: 0.5em !important;
    }

    &__ghost-card {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: $content-padding;
      border-radius: $card-border-radius;
      width: 100%;
      font-family: "IBM Plex Sans Condensed", "Roboto Mono";
      font-size: mat.font-size($typography-config, button);
      line-height: mat.font-size($typography-config, button);
      font-weight: mat.font-weight($typography-config, button);
      letter-spacing: 1.3px;
      text-transform: uppercase;
      border: 1px dashed;
      cursor: pointer;
      transition: border-color, background-color, color, $hover-transition-duration ease-out;

      &:hover {
         transition: border-color, background-color, color, $hover-transition-duration ease-in;
      }

      &:focus {
         outline: 0;
      }
    }
  }

  // .sc-checkbox-button {
  //   position: relative;
  //   // border-radius: $card-border-radius;
  
  //   &__surface {
  //     display: flex;
  //     flex-direction: column;
  //     align-items: center;
  //     justify-content: center;
  //     border-radius: $card-border-radius;
  //     padding: 0 16px;
  //   }

  //   // &__focus-overlay {
  //   //   top: 0;
  //   //   left: 0;
  //   //   right: 0;
  //   //   bottom: 0;
  //   //   position: absolute;
  //   //   pointer-events: none;
  //   //   border-radius: inherit;
  //   //   opacity: 0;
  //   //   transition: opacity 200ms $ease-in-out-curve-function, background-color 200ms $ease-in-out-curve-function;
  //   // }
  
  //   // &__icon {
  //   //   transition: 0.375s ease;
  //   // }

  //   &__input {
  //     // Code to hide the input
  //     clip: rect(0 0 0 0);
  //     clip-path: inset(100%);
  //     height: 1px;
  //     overflow: hidden;
  //     position: absolute;
  //     white-space: nowrap;
  //     width: 1px;
  
  //     // &:checked + .sc-checkbox-button__surface {
  //     //   .checkbox-stroked-icon-button__check-icon {
  //     //     //
  //     //   }
  //     // }
  
  //     // &:focus + .sc-checkbox-button__focus-overlay {
  //     //   opacity: 1;
  //     //   transition: opacity 200ms $ease-in-out-curve-function, background-color 200ms $ease-in-out-curve-function;
  //     // }
  //   }
  // }