/* disable the password reveal feature/button in micorsoft edge
 https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal */
::-ms-reveal {
  display: none;
}

* {
  box-sizing: border-box;
  outline: none !important;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  /* scrollbar-width: none !important; */
}

html {
  overflow-x: hidden;
  direction: rtl;
  height: 100%;
}

a {
  color: #1989ed;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

body {
  font-family: "Tajawal", sans-serif;
  color: #111;
  margin: 0;
  height: 100%;

  text-align: right;
  overflow: scroll;
  overflow-x: hidden;
  direction: rtl;

  /* Hide scrollbar */
  /* &::-webkit-scrollbar {
    width: 0 !important;
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: transparent;
  } */

  ::selection {
    color: #111;
    background: #afd9fe;
  }

  > header {
    margin: 0 auto;
    display: flex;
    width: 100%;
    background: #111;
    padding: 0 20px;
    height: var(--header-height);
    position: relative;
    z-index: 9999;

    .logo {
      text-decoration: none;
      position: absolute;
      top: 13px;
      right: 15px;
      width: 43px;
      height: 32px;
      padding: 5px;
      border-radius: 8px;

      .gh {
        position: relative;
        width: 19px;
        height: 19px;
        border-radius: 6px;
        background: #2598ff;
        display: none;

        .letter {
          font-family: "Lalezar", system-ui;
          font-size: 14px;
          font-weight: 600;
          color: #fff;
          position: absolute;
          top: 4px;
          right: 4.5px;

          &::selection {
            color: #fff;
            background: transparent;
          }
        }
      }

      > span {
        font-family: "Lalezar", system-ui;
        color: #fff;
        display: inline-block;
        position: absolute;
        font-size: 17px;
        top: 7px;
        /* right: 28px; */

        &::selection {
          color: #fff;
          background: transparent;
        }
      }
    }

    .pagetitle {
      display: inline-block;
      position: absolute;
      top: 17px;
      left: 48px;
      font-weight: 500;
      font-size: 16px;
      color: #fff;
      letter-spacing: 0.1px;
    }

    .search {
      height: 34px;
      font-weight: 400;
      cursor: pointer;
      width: 45%;
      position: absolute;
      background: #777;
      left: calc(50% - 22.5%);
      top: 11px;
      color: #fff;
      padding: 0;
      border-radius: 11px;
      text-align: center;

      > .placeholder {
        display: flex;
        align-items: center;
        justify-content: right;
        height: 100%;

        div {
          font-size: 12.5px;
          padding: 2px 11px 0 5px;
          width: 100%;
          height: fit-content;

          span {
            vertical-align: text-top;
            display: inline-block;
          }
        }
      }

      &::selection {
        background: transparent;
      }
    }

    .addnew {
      position: absolute;
      left: 56px;
      background: #eee;
      width: 73px;
      border-radius: 10px;
      padding: 0 13px 0 27px;
      height: 34px;
      top: 11px;
      font-size: 13px;
      cursor: pointer;

      .drop-btn-text {
        height: 100%;
        width: 100%;

        .text-container {
          padding-top: 2px;
        }
      }

      svg {
        position: absolute;
        top: 10px;
        left: 12px;
        width: 13px;
      }

      &:hover,
      &.active {
        background: #fff;
      }

      .dropdown {
        left: 0;

        .dropdown-content {
          width: 190px;
          left: 0;
          background: #ffffffd9;
          box-shadow: none;

          .dropdown-item {
            height: 38px;
            font-size: 13px;
            color: #000;
            text-decoration: none;

            svg {
              right: auto;
              left: 10px;
              top: 10px;
              width: 17px;
            }
          }
        }
      }
    }

    .mainmenu {
      position: absolute;
      left: 18px;
      top: 11px;
      height: 34px;
      width: 34px;
      border-radius: 10px;
      padding: 8px 8px 0 0;
      cursor: pointer;

      > svg {
        height: 17px;
        width: 17px;
        fill: #939393;
      }

      &:hover,
      &.active {
        background: #707070;

        > svg {
          fill: #eee;
        }
      }

      .dropdown {
        left: 0;
        top: 34px;

        svg {
          position: absolute;
          top: 10px;
          left: 12px;
          width: 13px;
        }

        .dropdown-content {
          width: 190px;
          left: 0;
          background: #ffffffd9;
          box-shadow: none;

          .dropdown-item {
            height: 38px;
            font-size: 12.5px;
            color: #000;
            text-decoration: none;

            & .text-container {
              padding-top: 2px;
            }

            svg {
              right: auto;
              left: 10px;
              top: 10px;
              width: 17px;
            }
          }
        }
      }
    }
  }
}

.os-macos {
  body {
    > header {
      .addnew {
        .drop-btn-text {
          .text-container {
            padding-top: 3.5px;
          }
        }
      }
    }
  }
}