@import "theme";

@font-face {
  font-family: 'JetBrains Mono';
  src: url("./fonts/JetbrainsMono.ttf");
}

.app_theme_color {
  color: $theme-color;
}

.app_warning_color {
  color: $warning-color;
}

.app_danger_color {
  color: $danger-color;
}

.app_danger_color_hover {
  &:hover {
    color: $danger-color;
  }
}

.app_warning_color_hover {
  &:hover {
    color: $warning-color;
  }
}

.app_hover_theme_color {
  &:hover {
    color: $theme-color;
  }
}

.app_hide {
  display: none !important;
}

.app_theme_color_border {
  border-color: $theme-color;
}

.app_theme_color_background {
  background-color: $theme-color;
}

.app_cursor_pointer {
  cursor: pointer;
}

.app_cursor_pointer_hover {
  cursor: pointer;
}

.app_none_user_select {
  user-select: none;
}

.app_flex_box {
  display: flex;
}

.app_block_box {
  display: block;
}

.app_position_relative {
  position: relative;
}

.app_position_absolute {
  position: absolute;
}

.app_color_white {
  color: $color-white;
}

.app_color_white_background {
  background-color: $color-white;
}

.c-g-switch-theme {
  width: 3.125rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
  margin-top: 0.25rem;
  margin-right: 1.25rem;

  .c-g-switch-theme-content {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    margin-top: 0.125rem;
    transition: all .2s;
    margin-left: 0.125rem;

    span {
      display: block;

      svg {
        top: .25rem;
        left: .25rem;
      }
    }
  }
}

.c-g-switch-theme-selected {
  .c-g-switch-theme-content {
    margin-left: calc(3.125rem - (1.25rem + 0.125rem));
  }
}

.light-mode {
  .c-g-switch-theme {
    background-color: $__primary-bg-color-dark;

    .c-g-switch-theme-content {
      background-color: $__primary-sub-bg-color-dark;
    }
  }
}

.dark-mode {
  .c-g-switch-theme {
    background-color: #EDF2F5;

    .c-g-switch-theme-content {
      background-color: #FFFFFF;
    }
  }
}
