@define-mixin mds-m-overlay {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 25rem;
  position: relative;
}

@define-mixin mds-m-overlay--minimized {
  width: 1.5rem;
}

@define-mixin mds-m-button {
  background-color: var(--mds-t-background-color);
  border: none;
  cursor: pointer;
  display: block;
  height: 2rem;
  outline: none;
  padding: 0;
  position: absolute;
  width: 1rem;

  &::before {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1rem;
  }

  &:focus-visible {
    border-radius: var(--mds-d-border-radius--default);
    outline: 2px solid var(--mds-d-border-color--accent);
    outline-offset: -2px;
  }
}

@define-mixin mds-m-button--minimized {
  background-color: transparent;
  box-shadow: none;

  &:hover {
    box-shadow: none;
  }

  &::before {
    margin-left: 0;
    margin-right: 0;
  }
}

@define-mixin mds-m-hitbox {
  cursor: pointer;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.mds-c-minimize-overlay-left {
  --mds-v-minimize-overlay-left--highlight: var(--mds-d-spacing--xxs) 0
    var(--mds-d-spacing--xs) rgb(0 0 0 / 10%);

  @mixin mds-m-overlay;

  width: calc($navigation-width--lg - $navigation-width--sm);

  @media screen and (max-width: 767px) {
    display: none;
    left: $navigation-width--sm;
    position: absolute;
    z-index: calc($z-index--navigation - 1);
  }

  &--highlight {
    box-shadow: var(--mds-v-minimize-overlay-left--highlight);
  }

  &--minimized {
    @mixin mds-m-overlay--minimized;
  }

  &__button {
    @mixin mds-m-button;

    border: 1px solid var(--mds-t-border-color--secondary);
    border-radius: 0 1rem 1rem 0;
    left: 100%;
    top: 5.875rem;

    .mds-c-icon {
      right: 0.125rem;
      vertical-align: -0.125rem;
    }

    &:hover {
      box-shadow: var(--mds-v-minimize-overlay-left--highlight);
    }

    &--minimized {
      @mixin mds-m-button--minimized;

      border: none;
      left: 0.25rem;

      .mds-c-icon {
        right: 0;
      }

      &:hover {
        box-shadow: none;
      }
    }
  }

  &__hitbox {
    @mixin mds-m-hitbox;
  }
}

.mds-c-minimize-overlay-right {
  --mds-v-minimize-overlay-right--highlight: calc(
      var(--mds-d-spacing--xxs) * -1
    )
    0 var(--mds-d-spacing--xs) rgb(0 0 0 / 10%);

  @mixin mds-m-overlay;

  max-width: 25rem;
  min-width: 50%;
  position: initial;

  @media screen and (min-width: 50rem) {
    min-width: 25rem;
  }

  &--highlight {
    box-shadow: var(--mds-v-minimize-overlay-right--highlight);
  }

  &--minimized {
    @mixin mds-m-overlay--minimized;

    min-width: 1.5rem;
  }

  &__scroll-wrapper {
    overflow-y: auto;
  }

  &__button {
    @mixin mds-m-button;

    border: 1px solid var(--mds-t-border-color--secondary);
    border-radius: 1rem 0 0 1rem;
    right: 100%;
    top: 1.625rem;

    .mds-c-icon {
      left: 0.125rem;
      vertical-align: -0.125rem;
    }

    &:hover {
      box-shadow: var(--mds-v-minimize-overlay-right--highlight);
    }

    &--minimized {
      @mixin mds-m-button--minimized;

      border: none;
      right: 0.25rem;

      .mds-c-icon {
        left: 0;
      }

      :hover {
        box-shadow: none;
      }
    }
  }

  &__hitbox {
    @mixin mds-m-hitbox;
  }

  .button-container {
    position: relative;
  }
}