// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
@use 'sass:color';

@import "themes/catpuccin.scss";

window.Bar {
    background: transparent;
    color: $ctp-text;

    >centerbox {
        margin: 8px 8px 0 8px;
    }
}

.pill {
  >.icon {
    color: $ctp-surface-0;
    padding: 6px 8px;
    font-size: 18px;
  }

  &.icon-left {
    &>.icon {
      border-radius: 5px 0 0 5px;
    }
    &>.label {
      border-radius: 0 5px 5px 0;
    }
  }
  &.icon-right {
    &>.icon {
      border-radius: 0 5px 5px 0;
    }
    &>.label {
      border-radius: 5px 0 0 5px;
    }
  }

  >.label {
    background: $ctp-surface-0;
    padding: 0 8px;
    font-size: 16px;
  }
}

.Time >.icon {
  background: $ctp-red;
}

.Date >.icon {
  background: $ctp-lavender;
}

.Workspaces {
  >.icon {
    background: $ctp-blue;
  }

  >.label button {
    all: unset;

    &.add {
      font-size: 12px;
      margin-left: 4px;
    }
  }
}

.Systray {
  >.icon {
    background: $ctp-green;
    padding: 4px 8px 0 8px;
    font-size: 20px;
  }

  .items {
    background: $ctp-surface-0;
    font-size: 16px;
  }

  &.icon-left {
    .items {
      border-radius: 0 5px 5px 0;
    }
  }
  &.icon-right {
    .items {
      border-radius: 5px 0 0 5px;
    }
  }

  .item {
    all: unset;
    padding: 8px 8px;
  }
}