// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;

.milestone {
  border: $b-1 solid var(--border-color, transparent);
  border-radius: $br-8;
  background: var(--color-background-primary);
  display: grid;
  grid-template:
    "avatar name button" auto "avatar content button" 1fr / calc(var(--sp-xxl) + var(--sp-l))
    1fr auto;
  padding: var(--sp-s) 0;
  align-items: center;
  column-gap: var(--sp-s);

  &.is-selected,
  &:hover {
    --border-color: var(--color-accent-primary);
  }
}

.avatar {
  grid-area: avatar;
  justify-self: flex-end;
}

.name {
  @include t.use-typography("body-small");

  grid-area: name;
  color: var(--color-foreground-primary);
}

.toggle-message {
  @include t.use-typography("body-small");

  grid-area: name;
}

.date {
  grid-area: content;
  color: var(--date-color, var(--color-foreground-secondary));

  &:hover {
    --date-color: var(--color-accent-primary);
  }
}

.snapshots {
  grid-area: content;
}

.milestone-buttons {
  grid-area: button;
  display: flex;
  padding-right: var(--sp-xs);
}

.version-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "content button";
  align-items: center;

  &:hover {
    --date-color: var(--color-accent-primary);
    --display-button: visible;
  }
}

.toggle-snapshots {
  background: none;
  border: none;
  color: var(--color-foreground-secondary);
  display: flex;
  flex-direction: row;
  gap: var(--sp-xs);
  align-items: flex-end;
  margin: 0;
  margin-top: var(--sp-xxs);
  margin-bottom: var(--sp-s);
  padding: 0;
  cursor: pointer;

  &:hover {
    color: var(--color-accent-primary);

    --icon-stroke-color: var(--color-accent-primary);
  }
}

.icon-clock {
  --icon-stroke-color: var(--color-accent-warning);
}

.icon-arrow {
  --icon-stroke-color: var(--icon-stroke-color, var(--color-foreground-secondary));
}

.icon-arrow-toggled {
  transform: rotate(90deg);
}

.entry-button {
  visibility: var(--display-button, hidden);
}