@import '../../styles/common';
@import '../ResourceList/variables';

$button-vertical-padding: calc(
  (var(--p-line-height-6) - var(--p-line-height-2) - var(--p-space-05)) / 2
);

.CheckableButton {
  @include text-style-button;
  @include recolor-icon(var(--p-icon-on-interactive));
  display: flex;
  align-items: center;
  min-height: var(--p-line-height-6);
  min-width: var(--p-line-height-6);
  margin: 0;
  padding: $button-vertical-padding var(--p-space-4);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  text-align: left;
  border-radius: var(--p-border-radius-1);
  width: 100%;
  background: var(--p-surface);
  box-shadow: var(--p-shadow-button);
  border: var(--p-border-width-1) solid var(--p-border-neutral-subdued);
  border-top-color: var(--p-border-subdued);
  border-bottom-color: var(--p-border-shadow-subdued);

  [data-buttongroup-segmented='true'] & {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &:hover {
    background: var(--p-action-secondary-hovered);
  }

  &:active {
    background: var(--p-action-secondary-pressed);
  }

  &.CheckableButton-measuring {
    font-size: var(--p-font-size-4);
    font-weight: var(--p-font-weight-bold);

    // simulates measuring with an additional digit (e.g. 00 instead of 0)
    &::before {
      content: '';
      display: inline-block;
      width: var(--p-font-size-4);
    }
  }

  @include page-after-resource-list-small {
    flex: 0 1 auto;
  }

  &:focus {
    outline: none;
  }

  &.CheckableButton-plain {
    border-radius: var(--p-border-radius-base);
    box-shadow: none;
    background: transparent;
    border: none;

    &:hover {
      background: transparent;
    }
  }

  &.CheckableButton-selectMode {
    @include text-emphasis-subdued;
    font-weight: var(--p-font-weight-medium);
  }

  &.CheckableButton-selected {
    color: var(--p-text);
  }
}

.Checkbox {
  pointer-events: none;
  height: var(--p-choice-size);
  width: var(--p-choice-size);
  margin-left: calc(
    -1 * ((var(--p-space-2) + var(--p-space-025))) - var(--p-control-border-width)
  ); // 1px accounts for border
}

.Label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  // padding to fix the bottom of letters being cutoff by overflow: hidden
  padding: var(--p-space-025) 0;
  margin-left: calc(var(--p-space-5) - var(--p-control-border-width));
}