@use "../mixin";

.MaterialButton {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  position: relative;

  text-decoration: none !important;
  vertical-align: middle;

  border-color: transparent;
  border-style: solid;
  border-width: 0px;

  background-color: transparent;

  cursor: pointer;
  overflow: hidden;
  transition:
    border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
    background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
  user-select: none;
  -moz-user-select: none;

  &.xs {
    @include mixin.typescale-style("label-large");

    gap: 8px;

    height: 32px;

    padding-inline: 12px;

    border-width: 1px;

    span {
      @include mixin.material-symbols($size: 20);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-large);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-medium);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-medium);
    }

    &.group {
      &.round {
        border-radius: var(--md-sys-shape-corner-small);
      }

      &.horizontal {
        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small)
              var(--md-sys-shape-corner-large);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)
              var(--md-sys-shape-corner-small);
          }
        }
      }

      &.vertical {
        width: 100%;

        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-small)
              var(--md-sys-shape-corner-small);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-large)
              var(--md-sys-shape-corner-large);
          }
        }
      }

      &:active {
        border-radius: var(--md-sys-shape-corner-large) !important;
      }
    }
  }

  &.s {
    @include mixin.typescale-style("label-large");

    gap: 8px;

    height: 40px;

    padding-inline: 16px;

    border-width: 1px;

    span {
      @include mixin.material-symbols($size: 20);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-medium);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-medium);
    }

    &.group {
      &.round {
        border-radius: var(--md-sys-shape-corner-small);
      }

      &.horizontal {
        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-medium)
              var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-extra-large);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-extra-large)
              var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-medium);
          }
        }
      }

      &.vertical {
        width: 100%;

        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)
              var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium)
              var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
          }
        }
      }

      &.selected,
      &:active {
        border-radius: var(--md-sys-shape-corner-extra-large) !important;
      }
    }
  }

  &.m {
    @include mixin.typescale-style("title-medium");

    gap: 8px;

    height: 56px;

    padding-inline: 24px;

    border-width: 1px;

    span {
      @include mixin.material-symbols($size: 24);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-large);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-large);
    }

    &.group {
      &.round {
        border-radius: var(--md-sys-shape-corner-small);
      }

      &.horizontal {
        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-large)
              var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-extra-large);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-extra-large)
              var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-large);
          }
        }
      }

      &.vertical {
        width: 100%;

        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large)
              var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small)
              var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large);
          }
        }
      }

      &:active {
        border-radius: var(--md-sys-shape-corner-extra-large) !important;
      }
    }
  }

  &.l {
    @include mixin.typescale-style("headline-small");

    gap: 12px;

    height: 96px;

    padding-inline: 48px;

    border-width: 2px;

    span {
      @include mixin.material-symbols($size: 32);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-full);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &.group {
      &.round {
        border-radius: var(--md-sys-shape-corner-medium);
      }

      &.horizontal {
        &:first-of-type {
          &.round {
            border-radius: calc(var(--md-sys-shape-corner-full) / 2) var(--md-sys-shape-corner-large)
              var(--md-sys-shape-corner-large) calc(var(--md-sys-shape-corner-full) / 2);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-large) calc(var(--md-sys-shape-corner-full) / 2)
              calc(var(--md-sys-shape-corner-full) / 2) var(--md-sys-shape-corner-large);
          }
        }
      }

      &.vertical {
        width: 100%;

        &:first-of-type {
          &.round {
            border-radius: calc(var(--md-sys-shape-corner-full) / 2) calc(var(--md-sys-shape-corner-full) / 2)
              var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium)
              calc(var(--md-sys-shape-corner-full) / 2) calc(var(--md-sys-shape-corner-full) / 2);
          }
        }
      }

      &:active {
        border-radius: var(--md-sys-shape-corner-full) !important;
      }
    }
  }

  &.xl {
    @include mixin.typescale-style("headline-large");

    gap: 16px;

    height: 136px;

    padding-inline: 64px;

    border-width: 3px;

    span {
      @include mixin.material-symbols($size: 40);
    }

    &.round {
      border-radius: var(--md-sys-shape-corner-full);
    }

    &.square {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &:active {
      border-radius: var(--md-sys-shape-corner-extra-large);
    }

    &.group {
      &.round {
        border-radius: var(--md-sys-shape-corner-medium);
      }

      &.horizontal {
        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)
              var(--md-sys-shape-corner-full);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full)
              var(--md-sys-shape-corner-large);
          }
        }
      }

      &.vertical {
        width: 100%;

        &:first-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-medium)
              var(--md-sys-shape-corner-medium);
          }
        }

        &:last-of-type {
          &.round {
            border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium)
              var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full);
          }
        }
      }

      &:active {
        border-radius: var(--md-sys-shape-corner-full) !important;
      }
    }
  }

  &.elevated {
    color: var(--md-sys-color-primary);

    background-color: var(--md-sys-color-surface-container-low);

    box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);
  }

  &.filled {
    color: var(--md-sys-color-on-primary);

    background-color: var(--md-sys-color-primary);
  }

  &.tonal {
    color: var(--md-sys-color-on-secondary-container);

    background-color: var(--md-sys-color-secondary-container);
  }

  &.outlined {
    color: var(--md-sys-color-on-surface-variant);

    border-color: var(--md-sys-color-outline-variant);
  }

  &.standard,
  &.text {
    color: var(--md-sys-color-primary);
  }
}
