@use "sass:map";

//@use '../../base/colors' as *;

$drawer-sizes: (
  "small": (
    "width": 100%
  ),
  "rest": (
    "width": 400px
  )
);



@mixin drawer-left {
  [data-drawer-align='left'] {
    top: 0;
    left: -100%;

    &.active {
      box-shadow: var(--cbp-shadow-level-4-right); //5px 0px 25px 5px rgba(0, 0, 0, 0.5);
      left: 0;
    }

    .cbp-drawer__header {
      padding-left: var(--cbp-space-5x);
      padding-right: var(--cbp-space-5x);
    }

    .cbp-drawer__content {
      padding-top: var(--cbp-space-4x);
      padding-left: var(--cbp-space-5x);
      padding-right: var(--cbp-space-5x);
    }

    @media only screen and (min-width : 600px) {
      .cbp-drawer__header {
        padding-left: var(--cbp-space-11x);
        padding-right: var(--cbp-space-5x);
      }
  
      .cbp-drawer__content {
        padding-top: var(--cbp-space-4x);
        padding-left: var(--cbp-space-11x);
        padding-right: var(--cbp-space-5x);
      }
    }

  }
}

@mixin drawer-right {
  [data-drawer-align='right'] {
    top: 0;
    right: -100%;

    &.active {
      box-shadow: var(--cbp-shadow-level-4-left);
      right: 0;
      left: unset;
    }

    .cbp-drawer__header {
      padding-left: var(--cbp-space-5x);
      padding-right: var(--cbp-space-11x);
    }

    .cbp-drawer__content {
      padding-top: var(--cbp-space-4x);
      padding-right: var(--cbp-space-11x);
      padding-left: var(--cbp-space-5x);
    }
  }
}

/* Potential DRY */
@mixin drawer-close-btn {
  align-items: center;
  background-color: transparent;
  border-radius: var(--cbp-border-radius-soft);
  border: 0;
  cursor: pointer;
  display: flex;
  height: var(--cbp-space-9x);
  justify-content: center;
  width: var(--cbp-space-9x);

  & > i {
    color: var(--cbp-color-interactive-secondary-lighter);
    font-size: var(--cbp-font-size-body);
  }

  &:hover {
    background-color: var(--cbp-color-interactive-secondary-dark);

    & > i {
      color: var(--cbp-color-text-lightest);
    }
  }

  &:focus {
    background-color: var(--cbp-color-interactive-focus-light);
    outline: var(--cbp-border-size-md) solid var(--cbp-color-black);
    outline-offset: -4px;

    & > i {
      color: var(--cbp-color-text-darkest);
    }
  }

  &:active {
    cursor: grabbing;
  }
}


@mixin drawer-nav-btn($font-size, $pad-left) {
  align-items: center;
  background-color: transparent;
  border-width: 0;
  border-color: transparent;
  border-style: solid;
  color: var(--cbp-color-interactive-secondary-darker);
  display: flex;
  font-size: $font-size;
  font-weight: var(--cbp-font-weight-medium);
  height: var(--cbp-space-14x);
  justify-content: space-between;
  padding-left: $pad-left;
  text-align: left;
  text-decoration: none;
  width: 100%;

  & > i {
    @include nav-caret;
  }

  &:hover {
    background-color: var(--cbp-color-interactive-secondary-lighter);
    color: var(--cbp-color-text-darkest);

    & > span {
      color: var(--cbp-color-text-darkest);
      font-weight: var(--cbp-font-weight-bold);
    }
  }

  &:focus,
  &:active {
    background-color: var(--cbp-color-interactive-focus-dark);
    color: var(--cbp-color-text-lightest);
    outline: var(--cbp-border-size-md) solid var(--cbp-color-white);
    outline-offset: calc(var(--cbp-space-1x) * -1);

    & > span {
      color: var(--cbp-color-text-lightest);
      font-weight: var(--cbp-font-weight-bold);
    }
  }

  // TechDebt: with implementation undecided, this selector is covering all the bases
  .active,
  &[aria-pressed=true],
  &[aria-selected=true],
  &[aria-current=true] {
    background-color: var(--cbp-color-interactive-active-light);
    color: var(--cbp-color-interactive-active-dark);
    font-style: italic;
  
    &:hover {
      color: var(--cbp-color-interactive-active-dark);
    }
  }
}

@mixin nav-caret {
  align-items: center;
  display: flex;
  height: var(--cbp-space-9x);
  justify-content: center;
  width: var(--cbp-space-9x);
}