@use '../abstracts' as *;

/* Organism - component yap card menu */

.o-yap-card-menu-wrapper {
  display: block;
  overflow: hidden;
  min-width: toRem(32);
  min-height: toRem(32);
  border-radius: toRem(4);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
  0 4px 5px rgba(0, 0, 0, 0.14),
  0 1px 10px rgba(0, 0, 0, 0.12);
  outline: 0;
}

.o-yap-card-menu {
  &__nav {
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: toRem(5);
    overflow: hidden;
    width: toRem(219);
    padding: toRem(9) toRem(8);

    &__item {
      @include outlineOnFocus($border-radius: 6px);
      justify-content: flex-start;
      width: 100%;
      height: auto;
      padding: toRem(7) toRem(7);
      text-align: left;
      &:hover {
       border-radius: toRem(6);
      }

      yap-icon,
      .a-icon {
        width: 20px !important;
        height: 20px !important;
      }
    }

    .m-color-selector {
      gap: toRem(8);
    }
  }
}

.spot-rs {
  border-radius: toRem(5);
  > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: toRem(6) toRem(15);
    .spot-line {
      display: flex;
      flex-direction: row;
    }
  }
}

.refresh-rs {
  display: flex;
  border-radius: toRem(5);

  > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    width: auto;
    min-width: toRem(140);
    padding: toRem(6) toRem(15);

    .refresh-line {
      @include outlineOnFocus($border-radius: 6px);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 0;
      background: transparent;
      font-weight: 400;
      text-align: left;
      cursor: pointer;
      &:first-of-type {
        margin-top: 0;
      }
      &:hover,
      &:active {
        font-weight: 500;
      }
    }
  }
}