mue/src/scss/_variables.scss

// since alex will no doubtedly be looking at this file often
// here's a reminder: please add a new line when doing nested scss, otherwise it is messy!
@use 'sass:map';
@import 'mixins';

$background: 'background';
$boxShadow: 'boxShadow';
$borderRadius: 'borderRadius';
$color: 'color';
$btn-background: 'btn-background';
$btn-backgroundHover: 'btn-backgroundHover';
$subColor: 'subColor';
$modal-background: 'modal-background';
$modal-text: 'modal-text';
$modal-sidebar: 'modal-sidebar';
$modal-sidebarActive: 'modal-sidebarActive';
$link: 'link';
$weather: 'weather';
$modal-secondaryColour: 'modal-secondaryColour';
$slightGradient: 'slightGradient';
$theme-colours: (
  'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
  'main': rgb(242 243 244 / 100%),
  'secondary': rgb(0 0 0 / 100%),
  'main-text-color': rgb(242 243 244 / 100%),
  'photo-info': #2d3436,
  'photo-info-dark': #ffff,
);
$modal: (
  'background': #fff,
  'background-dark': #2f3542,
  'text': rgb(0 0 0 / 100%),
  'tab-underline': rgb(204 204 204 / 100%),
  'tab-underline-active': rgb(0 0 0 / 100%),
  'border-radius': 12px,
  'sidebar': rgb(240 240 240),
  'tab-active': rgb(219 219 219 / 72%),
  'sidebar-dark': rgb(53 59 72),
  'tab-active-dark': rgb(65 71 84 / 90%),
  'modal-link': #d21a11,
  'modal-link-dark': #3498db,
);
$button-colours: (
  'confirm': rgb(46 213 115 / 100%),
  'reset': rgb(255 71 87 / 100%),
  'other': rgb(83 82 237 / 100%),
);
$ui-elements: (
  'background': rgb(0 0 0 / 70%),
  'backgroundBlur': 15px,
  'color': rgb(255 255 255),
  'borderRadius': 12px,
  'boxShadow': 0 0 0 1px #484848,
);
$themes: (
  light: (
    'weather': #333,
    'background': rgb(255 255 255 / 70%),
    'backgroundBlur': 15px,
    'color': rgb(0 0 0),
    'subColor': #333,
    'borderRadius': 12px,
    'boxShadow': 0 0 0 1px #e7e3e9,
    'btn-background': #fff,
    'btn-backgroundHover': rgb(247 250 252 / 90%),
    'modal-background': #fff,
    'modal-sidebar': rgb(240 240 240 / 100%),
    'modal-sidebarActive': rgb(219 219 219 / 72%),
    'modal-secondaryColour': #fafafa,
    'link': #5352ed,
    'slightGradient': linear-gradient(#fff, #ddd),
  ),
  dark: (
    'weather': #e7e7e7,
    'background': rgb(0 0 0 / 70%),
    'backgroundBlur': 15px,
    'color': rgb(255 255 255),
    'subColor': #c2c2c2,
    'borderRadius': 12px,
    'boxShadow': 0 0 0 1px #484848,
    'btn-background': #222,
    'btn-backgroundHover': #565656,
    'modal-background': #0a0a0a,
    'modal-sidebar': #0e1013,
    'modal-sidebarActive': #333,
    'modal-secondaryColour': #111,
    'link': rgb(115 115 255),
    'slightGradient': linear-gradient(#0e1013, #322a2a),
  ),
);

%basic {
  @include themed {
    background: t($background);
    border-radius: t($borderRadius);
    color: t($color);
    box-shadow: t($boxShadow);
  }

  backdrop-filter: blur(map.get($ui-elements, 'backgroundBlur'));

  .title {
    font-size: 18px;

    @include themed {
      color: t($color);
    }
  }

  .subtitle {
    font-size: 14px;

    @include themed {
      color: t($subColor);
    }
  }
}

%tabText {
  .mainTitle {
    display: flex;
    align-items: center;
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: capitalize;

    @include themed {
      color: t($color);
    }

    .backTitle {
      cursor: pointer;

      @include themed {
        color: t($subColor);

        &:hover {
          color: t($color);
        }
      }
    }
  }

  .title {
    font-size: 24px;
    font-weight: 600;

    @include themed {
      color: t($color);
    }
  }

  .subtitle {
    font-size: 16px;

    @include themed {
      color: t($subColor);
    }
  }

  .link {
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;

    @include themed {
      color: t($link);
    }

    &:hover {
      opacity: 0.8;
    }
  }
}

@mixin modal-button($type) {
  @include themed {
    @if $type == 'standard' {
      background: t($modal-sidebar);
      box-shadow: t($boxShadow);
      border: 0;
      color: t($color);

      &:hover {
        background: t($modal-sidebarActive);
      }
    }

    @if $type == 'secondary' {
      background: t($modal-sidebarActive);
      box-shadow: t($boxShadow);
      border: 0;
      color: t($color);

      &:hover {
        background: t($modal-sidebar) !important;
      }
    }

    border-radius: 12px;
    height: 40px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    flex-flow: row;
    justify-content: center;
    gap: 20px;
    transition: 0.5s;
    cursor: pointer;

    &:hover {
      background: t($modal-sidebarActive);
    }

    &:active {
      background: t($modal-sidebarActive);
      box-shadow: 0 0 0 1px t($color);
    }

    &:focus {
      background: t($modal-sidebarActive);
      box-shadow: 0 0 0 1px t($color);
    }

    &:disabled {
      background: t($modal-sidebarActive);
      cursor: not-allowed;
    }
  }
}

@mixin basicIconButton($padding, $font-size, $type) {
  @include themed {
    @if $type == 'ui' {
      background: t($btn-background);
      color: t($color);
      box-shadow: t($boxShadow);
      border-radius: t($borderRadius);

      &:hover {
        background: t($btn-backgroundHover);
      }

      &:active {
        background: t($btn-backgroundHover);
        box-shadow: 0 0 0 1px t($color);
      }

      &:focus {
        background: t($btn-backgroundHover);
        box-shadow: 0 0 0 1px t($color);
      }
    }

    @if $type == 'modal-text' {
      color: t($color);
      background: none;
      border-radius: t($borderRadius);

      &:hover {
        background: t($modal-sidebarActive);
        box-shadow: 3px solid t($modal-sidebarActive);
      }
    }

    @if $type == 'modal' {
      background: t($modal-sidebar);
      border: 1px solid t($modal-sidebarActive);
      color: t($color);
      border-radius: t($borderRadius);

      &:hover {
        background: t($modal-sidebarActive);
      }

      &:active {
        background: t($modal-sidebarActive);
        box-shadow: 0 0 0 1px t($color);
      }

      &:focus {
        background: t($modal-sidebarActive);
        box-shadow: 0 0 0 1px t($color);
      }
    }

    @if $type == 'legacy' {
      background: none;
      color: #fff;
      border-radius: t($borderRadius);
      box-shadow: 0 0 0 0 !important;

      &:hover {
        background-color: rgb(66 66 66 / 23%);
      }

      &:active {
        background-color: rgb(66 66 66 / 23%);
        box-shadow: 0 0 0 1px t($color);
      }

      &:focus {
        background-color: rgb(66 66 66 / 23%);
        box-shadow: 0 0 0 1px t($color);
      }
    }
  }

  // this needs to be moved up!
  padding: $padding;
  font-size: $font-size;
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.5s;
  display: grid;
  place-items: center;
}

@mixin legacyIconButton($padding, $font-size) {
  @include themed {
    color: t($color);
  }

  &:hover {
    @include themed {
      background: t($btn-background);
    }
  }
}